more

src/pageElements/LoadingSpinner.js

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import RingLoader from "react-spinners/RingLoader";
+import MoonLoader from "react-spinners/MoonLoader";
 import "../styles/spinner.scss";
 
 const LoadingSpinner = (props) => {
-  const { message } = props;
+  const { message, loaderType } = props;
   let [loading, setLoading] = useState(true);
   const color = "#31e0f7";
 
@@ -14,21 +15,39 @@ const LoadingSpinner = (props) => {
     borderColor: "#a4ebf4",
   };
 
+  const isMoon = loaderType === "MoonLoader" ? true : false;
   return (
-    <div className="spinner-outer-wrapper">
-      <div className="spinner-container">
-        <div className="loading-text-box">
-          <p className="loading-graph">{message}</p>
+    <div>
+      {isMoon ? (
+        <div>
+          <div className="spinner-outer-wrapper moon">
+            <MoonLoader
+              color={color}
+              loading={loading}
+              cssOverride={override}
+              size={150}
+              aria-label="Loading Spinner"
+              data-testid="loader"
+            />
+          </div>
         </div>
-        <RingLoader
-          color={color}
-          loading={loading}
-          cssOverride={override}
-          size={150}
-          aria-label="Loading Spinner"
-          data-testid="loader"
-        />
-      </div>
+      ) : (
+        <div className="spinner-outer-wrapper">
+          <div className="spinner-container">
+            <div className="loading-text-box">
+              <p className="loading-graph">{message}</p>
+            </div>
+            <RingLoader
+              color={color}
+              loading={loading}
+              cssOverride={override}
+              size={150}
+              aria-label="Loading Spinner"
+              data-testid="loader"
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };