From 7c8fd6c7170e8e568a4221f2b64b3f8c874d2f7d Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 25 Nov 2020 15:50:51 -0800
Subject: [PATCH] Added custom loading spinner component to improve stlying.

---
 src/App/App.jsx                               |  5 ++--
 .../loading-spinner/loading-spinner.atom.jsx  | 25 +++++++++++++++++++
 .../loading-spinner.styles.scss               |  8 ++++++
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/atoms/loading-spinner/loading-spinner.atom.jsx
 create mode 100644 src/components/atoms/loading-spinner/loading-spinner.styles.scss

diff --git a/src/App/App.jsx b/src/App/App.jsx
index 471a210..0349a6b 100644
--- a/src/App/App.jsx
+++ b/src/App/App.jsx
@@ -1,9 +1,10 @@
 import { ApolloProvider } from "@apollo/client";
-import { ConfigProvider, Spin } from "antd";
+import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import LoadingSpinnerAtom from "../components/atoms/loading-spinner/loading-spinner.atom";
 import RoutesPage from "../components/pages/routes/routes.page";
 import SignInPage from "../components/pages/sign-in/sign-in.page";
 import client from "../graphql/GraphQLClient";
@@ -34,7 +35,7 @@ export function App({ currentUser, checkUserSession }) {
   }, []);
 
   if (currentUser.authorized === null) {
-    return <Spin />;
+    return <LoadingSpinnerAtom />;
   }
 
   return (
diff --git a/src/components/atoms/loading-spinner/loading-spinner.atom.jsx b/src/components/atoms/loading-spinner/loading-spinner.atom.jsx
new file mode 100644
index 0000000..890713b
--- /dev/null
+++ b/src/components/atoms/loading-spinner/loading-spinner.atom.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Spin } from "antd";
+import "./loading-spinner.styles.scss";
+
+export default function LoadingSpinnerAtom({
+  loading = true,
+  message,
+  ...props
+}) {
+  return (
+    <div className="loading-spinner">
+      <Spin
+        spinning={loading}
+        size="large"
+        style={{
+          position: "relative",
+          alignContent: "center",
+        }}
+        tip={message ? message : null}
+      >
+        {props.children}
+      </Spin>
+    </div>
+  );
+}
diff --git a/src/components/atoms/loading-spinner/loading-spinner.styles.scss b/src/components/atoms/loading-spinner/loading-spinner.styles.scss
new file mode 100644
index 0000000..ed927a8
--- /dev/null
+++ b/src/components/atoms/loading-spinner/loading-spinner.styles.scss
@@ -0,0 +1,8 @@
+.loading-spinner {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  margin: 1em;
+}