How to disable page load spinner for dcc Interval

Dash Python
1

Hi there,

I am trying to use dcc.Interval to capture some real-time data points. However, the page shows the loading spinner every time the interval component triggers the callback. Currently the callback runs every 5 seconds.This is confusing for users as they may think something hasn’t finished loading on their screen. Is there a way to improve this experience?

Thanks,
Meg

2

Hi Meg,

Did you find a solution to this?

3

Hey @kelly_gfc ,

Are you referring to the update_title?

app = dash.Dash(__name__, update_title=None)  # remove "Updating..." from title
4

No I’m not. I’m referring to how to disable the loading component when using dcc.interval.

5

Hi, I had the same problem with dash ag-grid table, and I solved that by dcc.Loading(target_components=…).
The idea is to call dcc.Loading not for dcc.Graph, but for another layout component. I made a simple example that shows realization.

from random import random

import dash
from dash import dcc, html, Input, Output, State

app = dash.Dash(
    __name__,
    update_title=None,  # in order don't show loading instead of default title
)

figure = {
    'data': [
        {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montréal'},
    ],
    'layout': {
        'title': 'Dash Data Visualization'
    }
}

app.layout = html.Div([
    dcc.Loading(id="loading",
                children=[
                    html.Div(dcc.Graph(id='plot')),
                    html.Div(id='loading_trigger', hidden=True),
                ],
                target_components={'loading_trigger': 'children'},
                delay_hide=1000,  # imitate approximately time graph is loading
                fullscreen=True
                ),
    dcc.Interval(
        id='interval-component',
        interval=3 * 1000,  # Interval in milliseconds (3 seconds)
        n_intervals=0  # Start with 0 intervals
    )
])


@app.callback(
    Output('plot', 'figure'),
    Input('interval-component', 'n_intervals'),
    State('plot', 'figure'),
)
def update_output(_, fig):
    return figure


@app.callback(
    Output('loading_trigger', 'children'),
    Input('loading_trigger', 'children'),
)
def call_loader(_):
    return random()


# Run the app
if __name__ == '__main__':
    app.run_server(port=6785)
1 Like