Adding loading component #108
Conversation
src/components/loading.jsx
Outdated
| @@ -0,0 +1,12 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
Use import React from 'react' here. #101 explains why.
src/css/styles.css
Outdated
| animation: progress-bar-stripes .5s linear infinite; | ||
| } | ||
|
|
||
| .dotdotdot:after { |
There was a problem hiding this comment.
Please keep .dotdotdot class and animation. It's still useful for text as mentioned in #107
src/css/styles.css
Outdated
| margin-left: 20px; | ||
| height: 70px; | ||
| background-image: url(../img/infinity-loader.svg); | ||
| background-repeat: no-repeat; |
There was a problem hiding this comment.
Can we add background-position-x: center instead of using margin-left? Just preferred aesthetically.
There was a problem hiding this comment.
Sure, I'm a terrible noob when talking CSS, could you please share a link about the differences?
Aaah, I see, it moves the loading image at the center, ok!
| </div> | ||
| </div> | ||
| </div> | ||
| <div id="web-monitoring-ui-root"></div> |
There was a problem hiding this comment.
We should replace that old div.row with div.loading here, too.
There was a problem hiding this comment.
I didn't get this one, sorry, I removed the old loading and left it as it was because when loading the page the new loader appears; what should I do?
There was a problem hiding this comment.
There is a short amount of time before the React app renders, so I was suggesting that a div.loading was placed in the root div where the other one was before. It gets quickly replaced anyway, so not a big deal, just me being fussy. I'm working on some loading stuff and I really want to use your loading component, so I'll merge and just add this myself.
|
Great job on everything! Thanks a lot for this! |
New PR as per #106