diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/package.json | 1 | ||||
| -rw-r--r-- | vnext/src/components/Feeds.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Spinner.js | 21 | ||||
| -rw-r--r-- | vnext/yarn.lock | 4 |
4 files changed, 24 insertions, 4 deletions
diff --git a/vnext/package.json b/vnext/package.json index 83dff46c..4134026f 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -42,6 +42,7 @@ "moment": "^2.22.2", "query-string": "^6.1.0", "react": "^16.4.1", + "react-content-loader": "^3.1.2", "react-dom": "^16.4.1", "react-router-dom": "^4.3.1" } diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js index d0123016..0c8f46ae 100644 --- a/vnext/src/components/Feeds.js +++ b/vnext/src/components/Feeds.js @@ -60,7 +60,7 @@ class Feed extends React.Component { }); return this.state.msgs.length > 0 ? ( <div className="msgs" id="content">{nodes}</div> - ) : <Spinner />; + ) : <div className="msgs" id="content"><Spinner /><Spinner /><Spinner /><Spinner /></div>; } } diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js index 10a247f9..e3d635f8 100644 --- a/vnext/src/components/Spinner.js +++ b/vnext/src/components/Spinner.js @@ -1,14 +1,29 @@ import React from 'react'; - -import Icon from './Icon'; +import ContentLoader from "react-content-loader"; export default function Spinner(props) { return ( - <div id="content" style={centeredStyle}><Icon name="ei-spinner" size="m" /></div> + <ContentLoader + height={160} + speed={2} + primaryColor="#f3f3f3" + secondaryColor="#ecebeb" + className="msg-cont" + style={centeredStyle} + {...props} + > + <rect x="40" y="6" rx="4" ry="4" width="117" height="6.4" /> + <rect x="40" y="20" rx="3" ry="3" width="85" height="6.4" /> + <rect x="0" y="60" rx="3" ry="3" width="350" height="6.4" /> + <rect x="0" y="78" rx="3" ry="3" width="380" height="6.4" /> + <rect x="0" y="96" rx="3" ry="3" width="201" height="6.4" /> + <rect x="0" y="0" rx="0" ry="0" width="32" height="32" /> + </ContentLoader> ) } const centeredStyle = { + background: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' diff --git a/vnext/yarn.lock b/vnext/yarn.lock index fe6e7b07..08aa4f77 100644 --- a/vnext/yarn.lock +++ b/vnext/yarn.lock @@ -4095,6 +4095,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-content-loader@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-3.1.2.tgz#98230b4604b4b744eaa2d3fc88917dd988df6766" + react-dom@^16.4.1: version "16.4.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6" |