Delay loading of inactive tabs

Dash Python
1

I created a dashboard with four tabs, each containing between one and three plots. They are displaying the same data in different ways and all respond to changes in filtering criteria on a sidebar. Whenever any change is made to the filtering criteria on the sidebar it takes a very long time to load the plots, and this is mostly due to the fact that everything on all tabs is being updated. The application would run much faster if there was a way to implement “lazy-loading” or only loading components in the current active tab. Is there a way to do something like this?

2

I have the same problem

3

This approach might work:

app.layout = dcc.Tabs([
    dcc.Tab(label='Tab 1', value='tab1', children=[html.Div(id='tab1_content')]),
    dcc.Tab(label='Tab 2', value='tab2', children=[html.Div(id='tab2_content')])
], id='tabs')

@app.callback(Output('tab1_content', 'children'), [Input('tabs', 'value')])
def update_tab1(tab):
    if not tab == 'tab1': return
    return html.Span('Updated tab 1')


@app.callback(Output('tab2_content', 'children'), [Input('tabs', 'value')])
def update_tab2(tab):
    if not tab == 'tab2': return
    return html.Span('Updated tab 2')

The key here is to be able to define a callback per tab and use the active tab value to check if it’s the right one.

HTH, Robin

1 Like