Replace Loading screen

Dash Python
1

Hi,

I am trying to replace “Loading…” text on loading screen. I was trying to create my custom index_string and add there my custom <div>, but I am not able to do this correct.

He is my code:

app.index_string = '''

<!DOCTYPE html>

<html>

    <head>

        {%metas%}

        <title>{%title%}</title>

        {%favicon%}

        {%css%}

    

    </head>

    <body>

    <div id="react-entry-point">

        <div class="_dash-loading">

            <div>
            My custom
            </div>

        </div>

    </div>
    {%app_entry%}
        <footer>

            {%config%}

            {%scripts%}

            {%renderer%}

        </footer>

        <div></div>

    </body>

</html>

'''

My <div> appears for a second, but later “Loading…” text appears.

2

Hey @lance - Yeah, this is tricky - There are two loading screens, one that the backend provides on page load via index_string. Then, there is a secondary one when Dash’s front-end begins rendering the page: https://github.com/plotly/dash/blob/316b6628033e1acf2810f95640e64cf3babae913/dash-renderer/src/AppContainer.react.js#L41-L57.

Ideally, we’d have a way to disable that secondary loading screen (and keep the backend loading screen until everything is ready to render) but that’s not possible right now. So, the only customization that is possible right how is via the primary loading screen and the _dash-loading class.

1 Like