Loading component by valentijnnieman · Pull Request #352 · plotly/dash-core-components

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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 · 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!

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

 "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

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


New Demo app that shows off the spinners.

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

 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

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

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

 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

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


Fixes the Demo app.

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

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


Need to add a description docstring here.

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

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


…state

… into loading_component

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

Released as prerelease 0.44.0rc2

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


+## [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

Marc-Andre-Rivet

Did not mean to approve just yet :)

Mistake. Not quite there yet!

… 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

+ 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 d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

valentijnnieman force-pushed the loading_component branch from 2f5ca2c to d0a3847Compare 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

Comment threadsrc/components/Loading.react.js Outdated

T4rk1n reviewed Oct 30, 2018
View reviewed changes

Comment threadsrc/components/Loading.react.js Outdated

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

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

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

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

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

Comment threadsrc/components/Input.react.js

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/Loading.react.js Outdated

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

Marc-Andre-Rivet reviewed Nov 26, 2018
View reviewed changes

Comment threadsrc/components/Loading/spinners/CircleSpinner.jsx

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' ofhttps://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

Comment threaddash_core_components/CircleSpinner.py Outdated
Comment threadsrc/components/DatePickerRange.react.js
Comment threadsrc/components/Loading/Loading.react.js Outdated
Comment threadsrc/components/Loading/Loading.react.js Outdated

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

Comment threadsrc/components/Loading.react.js Outdated

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 masterFeb 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

Uh oh!

Uh oh!

Conversation

valentijnnieman commented Oct 30, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

T4rk1n commented Oct 30, 2018

Uh oh!

valentijnnieman commented Nov 6, 2018

Uh oh!

bpostlethwaite commented Nov 6, 2018

Uh oh!

bpostlethwaite commented Nov 6, 2018

Uh oh!

valentijnnieman commented Nov 6, 2018

Uh oh!

valentijnnieman commented Nov 6, 2018

Uh oh!

valentijnnieman commented Nov 7, 2018

Uh oh!

Marc-Andre-Rivet commented Nov 9, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

valentijnnieman commented Feb 13, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

valentijnnieman commented Feb 14, 2019

Uh oh!

Marc-Andre-RivetFeb 15, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eromoe commented Feb 26, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

valentijnnieman commented Feb 28, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

valentijnnieman commented Oct 30, 2018•
edited
Loading

Marc-Andre-RivetFeb 15, 2019•
edited
Loading

eromoe commented Feb 26, 2019•
edited
Loading

valentijnnieman commented Oct 30, 2018•
edited
Loading