Description
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.