Multipage app - display image while loading "heavy" pages

Dash Python
1

Hello,

I am building a multipage app using dash-python.

Some of the pages can take some time to load as they could be heavy or there might some computation to do before render them.

Is there any way to show something to screen to inform that the page is loading?

for example make the current page “opaque” or show some loading component or display an image? (like the image below when I go to some pages in dash.plotly.com)

I have tried to use the “loading” component passing the whole page as children but I couldn’t get it to work.

many thanks in advance!

Screenshot 2022-02-11 at 11.15.01
Screenshot 2022-02-11 at 11.15.011251×784 23.6 KB

2

You want to check out this: Loading | Dash for Python Documentation | Plotly

Why couldn’t you get it to work? You just wrap your div with the dcc.Loading component

3

I do not understand why indeed, but I will look into more in detail.

With the loading component, instead of the standard, is it possible to display a custom image or to make the current webpage opaque?

thanks

4

I think this could be of great use for this topic :grinning:

Thanks for sharing!

1 Like
5

Give this a try: Skeleton. You can checkout other components in the library as well.