✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Replace Loading screen

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.

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