Loading component #352

valentijnnieman · 2018-10-30T16:51:02Z

This is the new Loading component for the new Loading States api issue 267. For now it has a basic default spinner.

Please note!
I've had to make a small change to extract-meta to not pick up .jsx files, so that we can have .jsx files in src/ that are not supposed to be mapped to Dash components. This is so that I could split up all the spinners into separate files, that we don't want Dash to pick up as components - instead they should be JS only components that get used under the hood. There's probably a better fix here, let me know your thoughts please.

TODO:

Add more default spinners, and a prop for selecting which one to use (loading_screen_style = 'basic' | 'overlay' | 'spinner' | 'empty-div' | or something similar)
Support for full-screen spinners
Add props for styling the default spinner's colours and other
Add support for handling which prop caused loading time (once in renderer PR)
Allow for React components that don't get picked up by extract-meta, so we can have a file structure that allows separating of concerns.
Look into adding support for custom loading components, with this PR perhaps

SPINNERS:

Graph spinner : https://codepen.io/Chunkydory/pen/qQOrwB
Cube spinner : https://codepen.io/Chunkydory/pen/aQdpPL

edit: I'm also showing the component and prop Name in the HTML, just to show off that that information is being passed. In the final version of this component, I'll remove it (or at least change how it looks)

edit2: I've fixed the Demo app and I've added a Loading Demo app that you can fire up to check out all the spinners. npm start!

src/components/Loading.react.js

T4rk1n · 2018-10-30T17:57:10Z

@valentijnnieman You wrap the component you want to have a loading with this loading component ?

valentijnnieman · 2018-11-06T18:56:07Z

@bpostlethwaite I think you mentioned specific loading spinners for Plotly on Friday? If there are any that you think we should incorporate into this component, could you link them here? Thanks in advance :)

bpostlethwaite · 2018-11-06T19:11:49Z

https://github.com/plotly/streambed/blob/master/shelly/webapp/static/webapp/images/plotly-logo-loop.gif

But this one doesn't actually seem to have looping enabled. You'll need to open a GIF editor and enable looping.

I am pretty sure we should edit this one in streambed to support looping as well...

bpostlethwaite · 2018-11-06T19:12:22Z

If you create a loop version let me know and I'll PR that back into streambed

valentijnnieman · 2018-11-06T20:21:44Z

Hmm it's very small and blurry. I don't think we should have that as a default loading spinner, would rather have something in like we have here now! Taken from http://tobiasahlin.com/spinkit/ .

valentijnnieman · 2018-11-06T21:48:09Z

I made this https://codepen.io/Chunkydory/pen/qQOrwB which is a little bit campy! But I kind of like it. @cldougl also pointed out that this exists! https://codepen.io/doeg/pen/RWGoLR

valentijnnieman · 2018-11-07T19:29:11Z

Here's the pen of the cube spinner I just added: https://codepen.io/Chunkydory/pen/aQdpPL

Marc-Andre-Rivet · 2018-11-09T20:19:41Z

@valentijnnieman No specific suggestion, just a curated list of spinners
https://github.com/yangshun/awesome-spinners

valentijnnieman · 2018-11-14T16:48:22Z

dash_core_components/package.json

@@ -33,6 +34,7 @@
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "builder": "3.2.2",
+    "color": "^3.1.0",


New dependency used for darkening hex colors, used in the CubeSpinner component. It allows users to provide a color, and the component will figure out the appropriate darker colors that are used in the cube.

valentijnnieman · 2018-11-14T16:49:08Z

demo/LoadingDemo.react.js

+    );
+};
+
+export default LoadingDemo;


New Demo app that shows off the spinners.

valentijnnieman · 2018-11-14T16:51:05Z

extract-meta

@@ -39,7 +39,7 @@ function parseFile(filepath) {
    const urlpath = filepath.split(path.sep).join('/');
    let src;

-    if (!['.jsx', '.js'].includes(path.extname(filepath))) {
+    if (!['.js'].includes(path.extname(filepath))) {


We currently do not have any .jsx files in our source code, so I figured they could be used in a way to denote components that should not be picked up by extract-meta, so that we can use them internally in JS. It's an easy solution to have the spinners, in this case, in separate files and not in one huge Loading.react.js file.

valentijnnieman · 2018-11-14T16:51:41Z

index.html

-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css" />
-    <link rel="stylesheet" href="https://unpkg.com/react-select@1.0.0-rc.3/dist/react-select.css" />
-    <link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"
-    />


These are no longer needed since we supply these CSS files ourselves in the source code (using style-loader etc)

valentijnnieman · 2018-11-14T16:52:11Z

index.html

-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>


We're supplying React in the devDependencies now, so this is no longer needed.

So I dug through this because it was not obvious to me how the dependencies had changed based on the webpack.config.js and webpack.server.config.js changes in this PR -- they would not affect these script dependencies.

webpack.serve.config.js sets config.externals = undefined which makes webpack.config.js evaluate 'externals' in overrides to true which does not set react, react-dom, etc. as defaults.

Not going to ask for changes as this is out of scope, just documenting my own confusion. I think this could be improved on later.

valentijnnieman · 2018-11-14T16:54:29Z

webpack.config.js

@@ -55,7 +55,7 @@ module.exports = (env, argv) => {
        module: {
            rules: [
                {
-                    test: /\.js$/,
+                    test: /\.jsx?$/,


.jsx files weren't being picked up in the Webpack configs, this will add both .js and .jsx files.

valentijnnieman · 2018-11-14T16:54:45Z

webpack.serve.config.js

+config.output = {
+    filename: './output.js',
+    path: path.resolve(__dirname),
+};


Fixes the Demo app.

T4rk1n · 2018-11-26T18:38:47Z

src/components/Loading/Loading.react.js

+        PropTypes.node,
+    ]),
+
+    type: PropTypes.oneOf(['graph', 'cube', 'circle', 'dot', 'default']),


Need to add a description docstring here.

T4rk1n · 2018-11-26T18:40:59Z

src/components/Loading/spinners/CircleSpinner.jsx

+            <h3 className="dash-loading-title">
+                Loading {status.component_name}
+                's {status.prop_name}
+            </h3>


src/components/Input.react.js

src/components/Loading/Loading.react.js

src/components/Loading/spinners/CircleSpinner.jsx

…state

… into loading_component

valentijnnieman · 2019-02-13T14:53:46Z

Released as prerelease 0.44.0rc2

Marc-Andre-Rivet · 2019-02-13T17:57:15Z

CHANGELOG.md

@@ -2,6 +2,9 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).

+## [0.44.0] - 2019-02-13
+### Added
+- Loading component


Unreleased, revert version change for final merge. Add issue link.

Marc-Andre-Rivet

Mostly minor comments and questions

dash_core_components/CircleSpinner.py

src/components/DatePickerRange.react.js

src/components/Loading/Loading.react.js

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

src/components/Loading.react.js

… prop coming from dash-renderer

valentijnnieman · 2019-02-14T21:59:44Z

(Re) released as rc 0.43.0rc3 including fixes

Marc-Andre-Rivet · 2019-02-15T16:07:34Z

src/components/Loading.react.js

+            R.type(this.props.children) !== 'Object' ||
+            R.type(this.props.children) !== 'Function'
+        ) {
+            return <div className={className}>{this.props.children}</div>;


We're not using the id passed through props for id+key of this component, normal and loading cases. Might cause similar problems as what we've seen with other comps

I don't think we're setting key anywhere in the components, so I don't think it'll cause problems. The key is set in dash-renderer, however. But, you're right - I should add the id prop here!

eromoe · 2019-02-26T06:43:25Z

I have installed 0.44.0rc2 , but no loading shows,

Is something wrong with my installed packages ? :

dash==0.36.0  # The core dash backend
dash-html-components==0.13.5  # HTML components
dash-core-components==0.44.0rc2  # Supercharged components
dash-table==3.1.11  # Interactive DataTable component (new!)
dash-daq==0.1.0  # DAQ components (newly open-sourced!)
dash-bootstrap-components

valentijnnieman · 2019-02-28T19:36:25Z

Hi @eromoe - the packages you'd need are:

dash_html_components==0.14.0rc21
dash_renderer==0.18.0rc4
dash_core_components==0.43.0rc3

It looks like you're missing dash_renderer==0.18.0rc4!

Here's a link to the forums with a more detailed example of how to use this.

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847 Compare October 30, 2018 16:56

valentijnnieman mentioned this pull request Oct 30, 2018

Loading states api plotly/dash-renderer#93

Merged

2 tasks

T4rk1n reviewed Oct 30, 2018

View reviewed changes

src/components/Loading.react.js Outdated Show resolved Hide resolved

T4rk1n reviewed Oct 30, 2018

View reviewed changes

src/components/Loading.react.js Outdated Show resolved Hide resolved

valentijnnieman force-pushed the loading_component branch from 7172158 to 8cddd1b Compare November 7, 2018 15:55

valentijnnieman force-pushed the loading_component branch from ce88242 to 88ecff5 Compare November 13, 2018 18:56

valentijnnieman changed the title ~~[WIP]Loading component~~ Loading component Nov 13, 2018

valentijnnieman requested a review from chriddyp November 13, 2018 19:10

valentijnnieman commented Nov 14, 2018

View reviewed changes

demo/LoadingDemo.react.js

);

};

export default LoadingDemo;

Copy link

Contributor Author

valentijnnieman Nov 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New Demo app that shows off the spinners.

valentijnnieman commented Nov 14, 2018

View reviewed changes

valentijnnieman requested a review from cldougl November 16, 2018 16:55

T4rk1n reviewed Nov 26, 2018

View reviewed changes

Marc-Andre-Rivet reviewed Nov 26, 2018

View reviewed changes

src/components/Input.react.js Outdated Show resolved Hide resolved

Marc-Andre-Rivet reviewed Nov 26, 2018

View reviewed changes

src/components/Loading/Loading.react.js Outdated Show resolved Hide resolved

Marc-Andre-Rivet reviewed Nov 26, 2018

View reviewed changes

src/components/Loading/spinners/CircleSpinner.jsx Outdated Show resolved Hide resolved

Marc-Andre-Rivet reviewed Nov 26, 2018

View reviewed changes

src/components/Loading/spinners/CircleSpinner.jsx Outdated Show resolved Hide resolved

valentijnnieman added 4 commits February 8, 2019 16:33

Expose data-dash-is-loading attribute to all components with loading_…

4d19f5c

…state

Style wrapper of DatePicker components so they don't change appearance

35e8f19

Prerelease version 0.44.0rc2

fbd39b6

Merge branch 'master' of https://github.com/plotly/dash-core-components…

d5e11a6

… into loading_component

Marc-Andre-Rivet reviewed Feb 13, 2019

View reviewed changes

Marc-Andre-Rivet previously approved these changes Feb 13, 2019

View reviewed changes

dash_core_components/CircleSpinner.py Outdated Show resolved Hide resolved

src/components/DatePickerRange.react.js Show resolved Hide resolved

src/components/Loading/Loading.react.js Outdated Show resolved Hide resolved

src/components/Loading/Loading.react.js Outdated Show resolved Hide resolved

Marc-Andre-Rivet reviewed Feb 13, 2019

View reviewed changes

valentijnnieman added 2 commits February 13, 2019 13:59

Changed to unreleased and added link

4dab2d8

fragments/ folder for components used internally such as spinners

0d35300

Marc-Andre-Rivet reviewed Feb 14, 2019

View reviewed changes

src/components/Loading.react.js Outdated Show resolved Hide resolved

valentijnnieman added 5 commits February 14, 2019 11:15

initial_loading_state -> isLoading

f46c006

Add style and className props to DatePicker components

f2baa17

Refactored getLoadingState function

e80d7f6

Restore plotly-1.44.3.min.js

9d1a293

Removed defaultProps.loading_state because it overrides loading_state…

4ae07ce

… prop coming from dash-renderer

Marc-Andre-Rivet reviewed Feb 15, 2019

View reviewed changes

Revert version and dev-requirements

57ebaf4

Marc-Andre-Rivet approved these changes Feb 28, 2019

View reviewed changes

valentijnnieman added 3 commits February 28, 2019 15:07

Revert dev-requirements

0137efe

Try with dash 0.37.0rc1

c98a6df

Use rc of loading states dash-renderer

6279d0d

valentijnnieman merged commit e762437 into master Feb 28, 2019

alexcjohnson deleted the loading_component branch February 28, 2019 21:06

Akronix mentioned this pull request Mar 5, 2019

Loading component that shows up when a callback is taking too long Grasia/WikiChron-networks#38

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loading component #352

Loading component #352

valentijnnieman commented Oct 30, 2018 •

edited

Loading

T4rk1n commented Oct 30, 2018

valentijnnieman commented Nov 6, 2018

bpostlethwaite commented Nov 6, 2018

bpostlethwaite commented Nov 6, 2018

valentijnnieman commented Nov 6, 2018

valentijnnieman commented Nov 6, 2018

valentijnnieman commented Nov 7, 2018

Marc-Andre-Rivet commented Nov 9, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

Marc-Andre-Rivet Nov 26, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

T4rk1n Nov 26, 2018

T4rk1n Nov 26, 2018

valentijnnieman commented Feb 13, 2019

Marc-Andre-Rivet Feb 13, 2019

Marc-Andre-Rivet left a comment

Marc-Andre-Rivet left a comment

valentijnnieman commented Feb 14, 2019

Marc-Andre-Rivet Feb 15, 2019 •

edited

Loading

valentijnnieman Feb 21, 2019

eromoe commented Feb 26, 2019 •

edited

Loading

valentijnnieman commented Feb 28, 2019

Loading component #352

Loading component #352

Conversation

valentijnnieman commented Oct 30, 2018 • edited Loading

T4rk1n commented Oct 30, 2018

valentijnnieman commented Nov 6, 2018

bpostlethwaite commented Nov 6, 2018

bpostlethwaite commented Nov 6, 2018

valentijnnieman commented Nov 6, 2018

valentijnnieman commented Nov 6, 2018

valentijnnieman commented Nov 7, 2018

Marc-Andre-Rivet commented Nov 9, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

valentijnnieman commented Feb 13, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

valentijnnieman commented Feb 14, 2019

Marc-Andre-Rivet Feb 15, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eromoe commented Feb 26, 2019 • edited Loading

valentijnnieman commented Feb 28, 2019

valentijnnieman commented Oct 30, 2018 •

edited

Loading

Marc-Andre-Rivet Feb 15, 2019 •

edited

Loading

eromoe commented Feb 26, 2019 •

edited

Loading