Remove the "Loading ..." when app starts

[monitorcasalab]

Hi all

Is there any way to remove the “Loading …” that comes when running dash in page loading?

[jinnyzor]

Hello @monitorcasalab,

I believe that there are couple of these questions on the forums. You can use the search feature to help find this answer.

I think the only way is to use a css style sheet for it.

[Tobs]

In the past I have inspected the http event-response pairs for my dashboards. When looking through them, I see that in the initial response, the server responds with an html page. The page includes:

<div class="_dash-loading">
        Loading...
    </div>

Maybe if you change the content of this class you might be able to change the things that shows during loading of the dash page (disclaimer, I didn’t try it myself)

[AIMPED]

Hi @monitorcasalab you are not referring to the “Loading…” which is shown in the tab, right?

How to disable page load spinner for dcc Interval

Hey @kelly_gfc , Are you referring to the update_title? app = dash.Dash(__name__, update_title=None) # remove "Updating..." from title

[monitorcasalab]

I refer to the temporary content shown in the page itself

[AIMPED]

As already mentioned by @jinnyzor and @monitorcasalab you can use css for this. I used this to show a spinner instead of the “Loading…”:

Change "Loading..." to a spinner

I’ve done this in dash-bootstrap-components docs, see relevant CSS here. The basic idea is to hide the existing spinner by targeting the _dash-loading CSS class, then attach your custom spinner with ::after. In the above example the spinner-border argument to animation is a webkit animation defined by Bootstrap so that exact code won’t work out the box if you’re not using Bootstrap, but the same principle can be applied to other CSS spinners. For example I took one of the spinners from here and…