Full height and lazy loading options for Liveboards

Table of Contents

Loading visualizations in the Liveboard viewport
Lazy loading
Full height with minimum height setting
Additional resources

The Visual Embed SDK provides configuration options to control how embedded apps handle the height of frame and loading of visualizations on an embedded Liveboard.

Loading visualizations in the Liveboard viewport🔗

To dynamically resize the height of the Liveboard embed container, the Visual Embed SDK provides the fullHeight property.

If fullHeight is set to true:
The height of the Liveboard container dynamically adjusts to match the height of the Liveboard content. This causes all visualizations on the Liveboard to load simultaneously, which can lead to a potentially longer wait for the top-most visualizations to appear in the viewport. However, setting lazyLoadingForFullHeight to true along with fullHeight: true allows lazy loading for visualizations in the viewport as the user scrolls the page. The fullHeight: true works best when an embedded Liveboard has fewer visualizations.
When fullHeight is set to false (default):
Only the visualizations currently visible in the viewport are loaded initially. Additional visualizations are fetched incrementally as users scroll the page. This reduces initial load time, minimizes unnecessary data API calls, and provides a smoother, faster experience for large dashboards. By default, the fullHeight parameter is set to false.

Lazy loading🔗

When fullHeight is enabled, you can use the lazyLoadingForFullHeight parameter to enable lazy loading of visualizations.

Starting with Visual Embed SDK v1.52.0, the lazyLoadingForFullHeight parameter is enabled by default when fullHeight is set to true and the visualizations in the embedded Liveboard are loaded incrementally as the user scrolls, rather than all at once. This reduces initial load time and resource usage, and improves performance for large Liveboards.

If the lazyLoadingForFullHeight parameter is set to false, all visualizations load immediately, and the data is fetched upfront.

const embed = new LiveboardEmbed("#your-embed-div", {
  liveboardId: "your-liveboard-id", //your Liveboard ID
  fullHeight: true,
  lazyLoadingForFullHeight: true, // Enable lazy loading for full height
});

Lazy loading of scrollable container🔗

When fullHeight is enabled, the enableScrollableContainerLazyLoading parameter is set to true by default to enable lazy loading for scrollable container elements in Visual Embed SDK 1.52.0 and later.

Margin settings for lazy loading🔗

The lazyLoadingMargin parameter allows you to set the margin before a visualization loads in the viewport. For example, if set to '10px', the visualizations begin loading when the top edge is within the 10-pixel margin of the viewport. If set to '0px', the visualization loads only when it becomes fully visible in the viewport. This allows precise control over lazy loading behavior and improves both user experience and performance.

In Visual Embed SDK 1.52.0 and later, the lazyLoadingMargin defaults to '500px 0px' when fullHeight is enabled. This setting is similar to CSS margin, so '500px 0px' extends the prefetch 500px above and below the viewport and not sideways. The default setting allows loading one visualization ahead of the scroll position, so a chart has usually finished loading by the time it scrolls into view.

You can edit the margin setting as needed. Use a smaller margin to cut warehouse queries further, or '0px' to load a visualization only when it is visible. Accepted units are px, em, rem, %, vh and vw. The parameter also allows setting 0 and auto. Any invalid value is logged and ignored.

const embed = new LiveboardEmbed("#your-embed-div", {
  liveboardId: "your-liveboard-id", //your Liveboard ID
  fullHeight: true,
  lazyLoadingForFullHeight: true, // Enable lazy loading for full height
  lazyLoadingMargin: '0px',
});

Full height with minimum height setting🔗

In addition to fullHeight, the SDK also provides the minimumHeight parameter to set the minimum height (in pixels) for this container. The value defined for the minimumHeight attribute is applied only when fullHeight is set to true.

This ensures that even if the Liveboard is empty or has little content, the container maintains at least the specified minimum height.

const embed = new LiveboardEmbed('#embed', {
    // other liveboard view config
    fullHeight: true,
    minimumHeight: 600,
});