aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/package.json1
-rw-r--r--vnext/src/components/Feeds.js2
-rw-r--r--vnext/src/components/Spinner.js21
-rw-r--r--vnext/yarn.lock4
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"