Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A Flexible "Loading Status" API for Component Authors #267

Closed
chriddyp opened this issue Jun 8, 2018 · 6 comments

Comments

@chriddyp
Copy link
Member

commented Jun 8, 2018

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

This comment has been minimized.

Copy link

commented Jun 11, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jun 15, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jun 15, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Oct 16, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Oct 17, 2018

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

@valentijnnieman valentijnnieman referenced this issue Oct 30, 2018

Merged

Loading component #352

5 of 6 tasks complete
@chriddyp

This comment has been minimized.

Copy link
Member Author

commented Mar 31, 2019

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

@chriddyp chriddyp closed this Mar 31, 2019

Dash - A Powerful, Modern Plugin Experience automation moved this from To do to Done Mar 31, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.