[Feature Request] Global Loading Indicator

[orenbenkiki]

Is your feature request related to a problem? Please describe.

This relates to #869.

In general Loading requires the cooperation of each wrapped component. This places a burden on component writers (e.g., DataTable) to explicitly provide support for Loading.

Also, in a single page, there may be multiple Loading components. Replacing each with a spinner is a jarring UI, especially when the spinner size is not compatible with that of the component it is replacing.

Describe the solution you'd like

Create a new component with a global is_loading property. That is, this property is True if there is any pending request to the back-end for fresh data. Only when all such requests have been served would is_loading become False.

This allows the page designer to have a single loading indicator on the page (e.g., a global semi-transparent spinner div covering the whole page, or a red/green indicator somewhere, etc.).

The tricky part is that is_loading must not be affected by any callbacks that are triggered by changes to is_loading itself. Specifically, whenever any update triggers a request to the back-end, if is_loading is False, then is_loading needs to be changed to True, and any callbacks listening on is_loading need to be invoked first, followed by the original request.

When a request is complete, if it is the last pending request and is_loading is True, then is_loading needs to be changed to False. Any callbacks listening on is_loading need to be invoked. These callbacks must be completed before any new requests are sent.

For sanity, if a callback listens on is_loading, it is an error for any of its outputs to trigger any further callbacks. For simplicity, a callback on is_loading might also be prevented from having any other inputs. This would eliminate all sort of "interesting" edge cases in the code and still allow for the intended use cases.

[alexcjohnson]

I like this idea, in fact I've implemented very similar functionality in apps prior to dash. Should be fairly straightforward. Thanks for the suggestion @orenbenkiki!

[chriddyp]

This allows the page designer to have a single loading indicator on the page (e.g., a global semi-transparent spinner div covering the whole page, or a red/green indicator somewhere, etc.).

Note that we have a CSS-only version of this available right now - We inject a

<div class="_dash-loading-callback"/> 

into the app whenever it is waiting for a callback to be executed. This element is unstyled and contains no content. You can bind your own loading screens to this component by using custom CSS.

See some examples & discussion here: https://community.plot.ly/t/dash-loading-states/5687

This could definitely be improved a variety of ways:

• Ability to customize this via a component (like dcc.Loading)
• Ability to only apply CSS when certain components update, so fast-updating components don't trigger the update while slow-updating components don't.

[orenbenkiki]

I didn't know about <div class="_dash-loading-callback"/> - might be nice to mention it in the documentation of the Loading component. It is a much simpler (though less powerful) mechanism than what I proposed, and it is available today.

I immediately put it to good use and now have a nice floating CSS spinner roughly placed in the middle of the area where my graphs go (using position: absolute; z-index: 1; top: 30%; right: 50%;). This provided me with a workaround for https://github.com/plotly/dash/issues/865.

Thanks!

[Coding-with-Adam]

closed by #2760