# Full height and lazy loading options for Liveboards

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/lazy-load-fullHeight

# 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` 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.

```JavaScript
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.

```JavaScript
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.

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

## Additional resources

-   [Embedding a Liveboard]({{navprefix}}/{{embed-pinboard}})
    
-   [Liveboard embed view configuration properties]({{navprefix}}/{{LiveboardViewConfig}})
    
-   [Full app embed view configuration properties]({{navprefix}}/{{AppViewConfig}})