change loading screen

client/src/components/LoadingScreen.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+
+export default function LoadingScreen() {
+  return (
+    <div className="w-full h-full flex justify-center items-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn("animate-spin", "text-muted-foreground")}
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    </div>
+  );
+}

client/src/main.tsx

@@ -2,15 +2,15 @@ import React, { Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { RelayEnvironmentProvider } from "react-relay/hooks";
 import { RouterProvider } from "react-router-dom";
-import Loader from "./components/loader.tsx";
+import LoadingScreen from "./components/LoadingScreen.tsx";
 import "./index.css";
 import environment from "./lib/relay-environment";
 import router from "./router.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <RelayEnvironmentProvider environment={environment}>
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<LoadingScreen />}>
         <RouterProvider router={router} />
       </Suspense>
     </RelayEnvironmentProvider>