From 6b670a92ba15acad5f7e0053eb140dad9ee8d9ff Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:10:09 -0500
Subject: [PATCH] Added a loading overlay and loading spinner.

---
 components/loading/LoadingOverlay.tsx | 37 +++++++++++++++++++++++++++
 components/loading/LoadingSpinner.tsx | 16 ++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 components/loading/LoadingOverlay.tsx
 create mode 100644 components/loading/LoadingSpinner.tsx

diff --git a/components/loading/LoadingOverlay.tsx b/components/loading/LoadingOverlay.tsx
new file mode 100644
index 0000000..2ff147d
--- /dev/null
+++ b/components/loading/LoadingOverlay.tsx
@@ -0,0 +1,37 @@
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay
+} from "@chakra-ui/react";
+import React from "react";
+import LoadingSpinner from "./LoadingSpinner";
+
+const LoadingOverlay = (): JSX.Element => {
+  return (
+    <Modal
+      isCentered
+      isOpen
+      onClose={() => null}
+      motionPreset="slideInBottom"
+      scrollBehavior="inside"
+      size="xs"
+    >
+      <ModalOverlay bg="loading.overlayBg" />
+      <ModalContent bg="transparent" boxShadow="none">
+        {/* <ModalHeader>
+        </ModalHeader> */}
+        <ModalBody border="0px">
+          <Box h="100%" w="100%" textAlign="center">
+            <LoadingSpinner />
+          </Box>
+        </ModalBody>
+        {/* <ModalFooter>
+        </ModalFooter> */}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LoadingOverlay;
diff --git a/components/loading/LoadingSpinner.tsx b/components/loading/LoadingSpinner.tsx
new file mode 100644
index 0000000..8f11d4d
--- /dev/null
+++ b/components/loading/LoadingSpinner.tsx
@@ -0,0 +1,16 @@
+import { Spinner } from "@chakra-ui/react";
+import React from "react";
+
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <Spinner
+      thickness="4px"
+      speed="0.50s"
+      emptyColor="loading.spinnerEmptySpace"
+      color="loading.spinnerColor"
+      size="xl"
+    />
+  );
+};
+
+export default LoadingSpinner;