aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-18 14:59:29 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit6e5362245826223c8141d50646f3b7368850f924 (patch)
tree66f148dd1f1a5bb14cd10521b153d7305984b853 /vnext/src/components
parent7c0f09c6739f2c591b0748f378f73d037762f3d7 (diff)
content loader
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Feeds.js2
-rw-r--r--vnext/src/components/Spinner.js21
2 files changed, 19 insertions, 4 deletions
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'