Initial load in dash multipage

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!

Hi there,
Welcome to here!

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

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

    title='TR Checks',
    name='TR Checks'

def layout():
    layout = main_container(
                dmc.Center(create_searchbar_skeleton(), my=20),
                dmc.Center(create_overview_skeleton(), my=20)
    return layout


def display_tr_checks_overview_callback(app: Dash):
        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