content loader

1 files changed, 18 insertions, 3 deletions

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'