removed loading spinner added random gif

src/components/Loading.css

@@ -4,25 +4,17 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
+  background-color: var(--cream);
 }
 
-.loading-spinner {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border-left-color: #09f;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.loading-gif {
+  width: 150px; /* Adjust the size as needed */
+  height: 150px; /* Adjust the size as needed */
 }
 
 .loading-container p {
   margin-top: 10px;
   font-size: 18px;
-  color: #555;
+  color: var(--dark-blue);
+  font: var(--primary-font);
 }

src/components/Loading.jsx

@@ -4,7 +4,11 @@ import "./Loading.css"; // Optional: Add this if you want to style your loading
 const Loading = () => {
   return (
     <div className="loading-container">
-      <div className="loading-spinner"></div>
+      <img
+        src="https://static.igem.wiki/teams/5125/small-bouncing-coraline.gif"
+        alt="Loading..."
+        className="loading-gif"
+      />
       <p>Loading...</p>
     </div>
   );

src/containers/App/App.jsx

@@ -33,7 +33,12 @@ const App = () => {
   }, [title, location.pathname]);
 
   if (loading) {
-    return <Loading />;
+    return (
+      <>
+        <Navbar />
+        <Loading />
+      </>
+    );
   }
 
   return (