Full height and lazy loading options for Liveboards

Full height and lazy loading options for Liveboards

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 boolean property. The fullHeight property dynamically adjusts the height of the embed container to match the height of the Liveboard, thereby eliminating the need for scroll bars.

  • 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 lazyLoadFullHeight 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.

Full height with default height setting🔗

In addition to fullHeight, the SDK also provides the defaultHeight parameter. The value defined for the defaultHeight attribute is applied only when fullHeight is set to true. When fullHeight is true, the embedded container resizes to fit the Liveboard content, and defaultHeight sets the minimum height (in pixels) for this container. This ensures that even if the Liveboard is empty or has little content, the container maintains at least the specified minimum height. If fullHeight is set to false, the defaultHeight attribute has no effect.

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

Lazy loading with full height enabled🔗

The lazyLoadingForFullHeight boolean parameter enables lazy loading of visualizations when fullHeight is true. When set to true, visualizations in the embedded Liveboard are loaded incrementally as the user scrolls, rather than all at once. This improves performance for large Liveboards by reducing initial load time and resource usage.

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

By default, the lazyLoadingForFullHeight attribute is set to false. When set to false, all visualizations load immediately, and the data is fetched upfront.

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 will begin loading when the top edge is within the 10-pixel margin of the viewport. If set to '0px', the visualization will load only when it becomes fully visible in the viewport. This allows for precise control over lazy loading behavior and improves both user experience and performance.

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

Additional resources🔗