Initial load in dash multipage

Dash Python
1

HI there!

I have a question regarding the rendering with dash pages. I use dmc.Navlinks and dmc.Anchors and it seams that when i switch to another page that the content gets rendered while i am still on the page from which i am coming. I would like to have the behavior that i switch to the other side and instantly see the loading spinners.

I hope I could describe it properly and thanks in advance!

2

Hi there,
Welcome to here!

3

Some additional informations:
when i look at the url when I clicked on a anchor or navlink it changes immediately to the right path but the page with loader dont get displayed. Only when the whole layout is loaded it changes

4

I solved the problem with first loading a dummy div or in my case a dash mantine component skeleton and then load the main content with a callback.

Multi page layout:

rom components.container import main_container
from components.overlay import create_overview_skeleton, create_searchbar_skeleton

import dash
from dash import html
import dash_mantine_components as dmc

dash.register_page(
    __name__,
    path='/transparency_register_checks',
    title='TR Checks',
    name='TR Checks'
)

def layout():
    layout = main_container(
        html.Div(
            id='overview-container', 
            children=[
                dmc.Center(create_searchbar_skeleton(), my=20),
                dmc.Center(create_overview_skeleton()), 
                dmc.Center(create_overview_skeleton(), my=20)
            ]
        )
    )
    return layout

Callback:

def display_tr_checks_overview_callback(app: Dash):
    @app.callback(
        Output('overview-container', 'children'),
        Input('overview-container', 'children'),
    )
    def display_overview(load_div):
        if isinstance(load_div, list):
            return create_overview_layout(0)
        raise PreventUpdate

Note: Dont set prevent initital call

1 Like