try to style loading component, add circular progress spinner

AlexandraOM · Feb 20, 2020 · 578ad66 · 578ad66
1 parent daba367
commit 578ad66
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@rmwc/button": "^5.7.2",
     "@rmwc/card": "^5.7.2",
     "@rmwc/checkbox": "^5.7.2",
+    "@rmwc/circular-progress": "^5.7.2",
     "@rmwc/dialog": "^5.7.2",
     "@rmwc/formfield": "^5.7.2",
     "@rmwc/list": "^5.7.2",

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { TypeQ } from '../style';
 
 const Bottom = styled.footer`
   display: flex;

diff --git a/src/components/Loading/Loading.js b/src/components/Loading/Loading.js
@@ -1,9 +1,29 @@
 import React from 'react';
+import styled from 'styled-components';
+import { CircularProgress } from '@rmwc/circular-progress';
+import { TypeQ } from '../../components/style';
+
+const CenterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 500vw;
+  vertical-align: center;
+  margin: auto;
+  text-align: center;
+  align-items: center;
+`;
+
+const Spinner = styled(CircularProgress)`
+  display: flex;
+`;
 
 const Loading = () => {
   return (
     <>
-      <h1> Loading... </h1>
+      <CenterWrapper>
+        <TypeQ use='headline3'> Loading... </TypeQ>
+        <Spinner />
+      </CenterWrapper>
     </>
   );
 };