Added custom loading spinner component to improve stlying.

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 (

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>
+  );
+}

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;
+}