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 ; + return ; } 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 ( +
+ + {props.children} + +
+ ); +} 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; +}