Loading Indicator Animation in Browser Tab Title

Dash Python
1

Hi all,

I already looked for similar topics but didn’t find anything that seems to apply to my case. I have quite a large Dash webapp with many different features, including SQL queries, charts etc. The user that I’m building the app for wants to see a loading animation while the app is doing any sort of background processing. This could be loading data from a server, uploading data, generating charts, whatever. Basically, anytime a callback is executed, there shall be a loading animation in the browser tab ribbon where the favicon would be when no callbacks are executed.

So the idea is to make it easier to see when something is loading in the background. I’m specifically not referring to loading animations on the page itself.

Is there any way I can instruct the browser to show this animation?
Under the link below I found how to adjust the text that is shown (“Customizing or Removing Dash’s “Updating…” Message”), but I haven’t yet seen a solution that addresses what I’m trying to find.

[https://dash.plotly.com/external-resources]

Thanks!

2

Hello @JWM,

Welcome to the community!

If you want to update the favicon, you can do so by updating the link in the body that is type iamge/x-icon and rel icon.

When you update this, it will adjust it in the browser tab.

You’ll need to determine how you do this. I’m thinking for all callbacks it’d be a little extensive, if not annoying. XD

3

Thanks for your answer @jinnyzor
I already have the company logo as the favicon and this should remain the same no matter what I’m doing in the app. What I want to do is to show the browser’s loading animation in that place when there are background processes running, so that it looks just like when I refresh any other page on the internet.

Is there any way to “force” a browser to do this even when it’s not actively loading a different URL?
image

4

No, there isnt a way to trigger the browser tab loading spinner, the only way is to adjust the favicon during the callback and then change it back once the callback is done.