A Flexible "Loading Status" API for Component Authors

[chriddyp]

This issue pertains to adding a flexible "loading" UI for component authors and therefore, dash developers.

This work item has been sponsored by an organization. Big thanks!
If your company or organization would like to prioritize features by sponsoring dash development, please reach out

The loading experience will be customizable by the component authors on a per-component basis. This might involve:

• dash-renderer could pass in a is_updating and is_updating_prop to the component when it is waiting for an update.
• The component author would be responsible for rendering the appropriate loading screens
• This enables component authors to design different UIs for different components: The loading screen for the figure property of the dcc.Graph component might be a faded overlay whereas the loading screen for a dropdown's options property might be something different.
• This also enables component authors to "disable" their components when they are in an updating state
• Component authors would be responsible for making this loading screen customizable. They might have a prop like loading_screen_style = 'basic' | 'overlay' | 'spinner' | 'empty-div' | 'none'. This might be customizable on a per property basis.
• If a certain callback updates a property really quickly, the user can omit the loading screen for that property (by setting loading_screen_style = 'none') so that the component doesn't "flash" it's screen on and off.

In addition to creating the framework for introducing loading screens into components, we will introduce our own loading designs into our set of component libraries (dash-html-components, dash-core-components). Our implementation should set the design and API standard for other component authors.

[slishak]

Out of interest, will this feature support logging status messages from a long-running callback to the loading screen? At the moment I print the status of long running callbacks to stdout, but it would be nice to be able to view these in the browser instead of in the console window.

[chriddyp]

Out of interest, will this feature support logging status messages from a long-running callback to the loading screen? At the moment I print the status of long running callbacks to stdout, but it would be nice to be able to view these in the browser instead of in the console window.

It will in a sense. You won't be able to send the messages to the loading components during the callback but you will be able to customize the loading messages at the start of the callbacks. I'm imagining that the API will be something like:

dcc.Graph(loading_text='Please wait')

[chriddyp]

Some additional feedback on suppressing loading spinners for particular callbacks: https://community.plot.ly/t/can-i-skip-activating-the-dash-loading-callback-div-for-some-callbacks/10951

[chriddyp]

For folks that stumble upon this issue, note that global, app-level loading states are currently possible through the method described here: https://community.plot.ly/t/mega-dash-loading-states/5687

[chriddyp]

There is a very interesting solution to this problem done in pure-dash right now, no changes to the framework necessary: https://community.plot.ly/t/in-a-plotly-dash-app-how-to-show-a-default-text-value-upon-each-click-in-a-div-until-the-div-is-populated/14588/5?u=chriddyp

[chriddyp]

This item was sponsored by one of our partners (https://plot.ly/products/consulting-and-oem/) and completed in plotly/dash-renderer#93 🎉