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 ).
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).
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
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 ?
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.
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