Improving app first loading presentation

Dash Python
1

Hi Everybody,

I have an app that has a different callbacks that are called everytime that the user change a dcc.Input value (in this case “Company Ticker”)

During the first page loading it takes time inporting all libraries and also executing all the callbacks, I am able to change the loading message for something different, but when it start the callbaks process it shows the page incompleate for a while (not so nice :woozy_face:).

I don’t want to add a Spinner in every callback because everytime the user change the Ticker it will trigger the spinners and I prefer the transition of the page directly form one Company info to the other.

I want to find a way to show the user “something” in the first page loading that takes more time than the usual time for the loading page in order to show the page only when all the callbacks are finished.

What is the best way to do that (or the worst, something is best than nothing).

Thanks. :grinning:

2

I think you can try to cover it with a full-screen loading animation until the component state changes.

3

Hey @stu

Thank for your advice :grinning:

Do you have any link where I can investigate this kind of solution ? :thinking:

Or any code to provide?

I thought something like that using a css file but I don’t know how to control the time duration.

Now I’m working in using a nice Lottie files with Dash, I am thinking to use a html.Div with the “wellcome” stuff and styling it with height100vh and width 100vw as mentioned by Tom in this link:

Thanks again :grinning:

4

You can use dcc.loading, refer to the document. I also used it in my demo.

5

@stu

I’m using this, but as I mentioned in my first post, if I use Spinners in my callbacks they will be trigger any time the user change the dcc.Input, and what I want to show is a “Wellcome” message because the first loading page takes more time.

By the way, you can replace the “loading…” message in your demo adding this to the css.file

._dash-loading {
  color: transparent;
  width: 0;
  height: 0;
  font-size: 2.4em;
  text-align: left;
}

._dash-loading::after {

And adding your animation then.

7

Hey @stu

Here you can see my app:
https://companyanalysis.herokuapp.com/

I replaced the “loading…” message and show nothing at the begining, but very soon it shows the page with some empty graph while loading the rest of the callback information.

I added some spinners in some callbacks trying to solve the issue from that way, but implies add spinners to all callbacks.

If you change the company name or the ticker you will see that some transitions from one info to the other is done without spinner (like the historical price graph) and others use spinners, I want to avoid the spinners when the user change the company.

How can I show the animation until the entire page are first loaded ? :thinking:

Thanks again for your time.

8

All you need to do is to set up a div for your welcome animation and wrap it in dcc.loading, and then use the loading_state of the component you need to wait to trigger it.

9

I don’t know if I understand your solution (English is not my best skill).

Every callback start in different times and also finished in different moment, how can I trigger the dcc.Loading to start when the page start loading and finish when the last callback are also finished.

It exist a loading_state for the complete page?

Thanks. :grinning:

11

Thanks :grinning:

That means I have to put my about 50 different components as input.

I’ll try.

12

Did you see this in the document?

loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys 'is_loading', 'prop_name', 'component_name'. Those keys have the following types:

    is_loading (boolean; optional): Determines if the component is loading or not
    prop_name (string; optional): Holds which property is loading
    component_name (string; optional): Holds the name of the component that is loading
13

Why is there 50? You only need to use the most outer div.

14

Did you see my page ?

Each simple data has a different component. :woozy_face: