Add page loader

src/components/Content.js

@@ -3,7 +3,8 @@ import TopBar from './TopBar.js';
 import MainContent from './MainContent.js';
 import SideBar from './Sidebar.js';
 import { useFile } from "react-blockstack"; 
-import ExtensionRouter from "./ExtensionRouter"
+import ExtensionRouter from "./ExtensionRouter";
+import Loader from './Loader';
 
 export default function Content ( props ) {
   const { person } = props;
@@ -20,7 +21,7 @@ export default function Content ( props ) {
   const passwordsArray = passwords ? JSON.parse(passwords) : [];
   const name = person.name() || 'User';
   const extensionView=(window.location.pathname.includes("extension"));
-  return credentials === undefined || passwords === undefined || notes === undefined ? (<div>Loading..</div>):(
+  return credentials === undefined || passwords === undefined || notes === undefined ? (<Loader />):(
     extensionView ? <ExtensionRouter
             credentials={credentialsArray}
             setCredentials={setCredentials}

src/components/Loader.css

@@ -0,0 +1,72 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.loader-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background: #00aef3;
+  font-family: sans-serif;
+  font-size: 8px;
+  letter-spacing: 4px;
+  color: white;
+}
+
+.vaultilo__loader {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+  width: 100%;
+  max-width: 650px;
+  height: 300px;
+  letter-spacing: 3px;
+  padding: 25px;
+}
+
+.loader__item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  margin: 25px;
+}
+
+/**********/
+/* LOADER 4*/
+/**********/
+.load__4 {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  animation: example-4 1s cubic-bezier(0.41, 0.25, 0.32, 0.83) infinite;
+}
+
+.loader-4 {
+  background: #93edc7;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+}
+
+@keyframes example-4 {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(1turn);
+  }
+}

src/components/Loader.js

@@ -0,0 +1,17 @@
+import React from "react";
+import './Loader.css';
+
+export default function Loader() {
+  return (
+    <div className="loader-wrapper">
+      <div className="vaultilo__loader">
+        <div className="loader__item">
+          <div className="loader load__4">
+            <div className="loader loader-4"></div>
+            <div className="loader loader-4"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Login.js

@@ -1,14 +1,13 @@
 import React, { useEffect } from "react";
 import { useBlockstack } from "react-blockstack";
+import Loader from './Loader';
 
 export default function Login() {
   const { signIn } = useBlockstack();
   useEffect(() => {
     signIn();
   }, []);
   return (
-    <div>
-      Logging In...
-    </div>
+    <Loader />
   ); 
 }