How to "lazy load" dcc.Graph elements in a tabbed dash application?

[hogcalm1543]

I built an application that splits up the source data according to some category and displays each category on a separate plotly express timeline in a Tab/Tabs environment. Outside the Tabs(), I have a couple of forward-backward buttons that move the displayed time window accordingly. I want the buttons to act on all tabs, so that when switching between tabs, all plots always show the same time frame. To that end, clicking the buttons updates a dcc.Store which in turn triggers updating of all plots.

All this works fine so far, but it is quite sluggish because all actions (initial load and time window buttons) trigger reload of all plots, not just the visible one. I set “prevent_initital_call=True” in the plot-generating callback but it still fires once for each tab on initial load.

If, inside the dcc.Graph updating callback, there were a way of knowing if this Graph is on a currently visible tab I could just raise a PreventUpdate exception if it ain’t. Thoughts?

[jinnyzor]

Hello @hogcalm1543

You should check out the dash-intersection-observer, this will allow you to only load objects when they are in the view port.

[AIMPED]

Dash Intersection Observer

Hello Dash community, I just created a small Dash component dash_intersection_observer which allows to trigger callbacks when elements of the app become visible in the viewport. The component wraps around react-intersection-observer which itself wraps around the base javascript Intersection Observer. My use case was that I have a scrollable dashboard with quite a few graphs and wanted to load the graphs lazily as they come into view. Here is a mock up of my use case: [dash-intersection-obser…