fix flash

src/App.tsx

@@ -1,9 +1,8 @@
 import { Routes, Route } from "react-router-dom";
-import { AnimatePresence } from "framer-motion";
 
-import Home from "./Home";
-import Receive from "./Receive";
 import Join from "./Join";
+import Layout from "./components/Layout";
+
 function App() {
   return (
     <div className="App">
@@ -12,7 +11,9 @@ function App() {
 
       <Routes>
         {/* <Route path="/" element={<Home />} /> */}
-        <Route path="/" element={<Join />} />
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Join />} />
+        </Route>
       </Routes>
     </div>
   );

src/Join.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
-import { redirect } from "react-router-dom";
-import button from "./components/button"
 import WaitlistForm from "./components/WaitlistForm";
 import { WaitlistAlreadyIn } from "./components/WaitlistAlreadyIn";
 
 export default function Join() {
     // On load, check if the user is already on the waitlist
     const [waitlisted, setWaitlisted] = useState(false);
-    const [waitlistId, setWaitlistId] = useState(localStorage.getItem('waitlist_id') || "");
+    const [waitlistId] = useState(localStorage.getItem('waitlist_id') || "");
     const [loading, setLoading] = useState(true);
 
     // Fetch the waitlist status from the backend
@@ -17,18 +15,17 @@ export default function Join() {
                 if (res.status === 200) {
                     setWaitlisted(true);
                 }
-
+                setLoading(false);
             })
+        } else {
+            setLoading(false);
         }
-        setLoading(false);
     }, [waitlistId]);
 
     return (
-        <div className="safe-top safe-left safe-right safe-bottom">
-            <div className="disable-scrollbars max-h-screen h-full overflow-y-scroll mx-4">
-                {waitlisted && !loading ? <WaitlistAlreadyIn /> : !loading ? <WaitlistForm /> : null}
-            </div>
-        </div >
+        <>
+            {loading ? null : waitlisted ? <WaitlistAlreadyIn /> : <WaitlistForm />}
+        </>
     )
 }
 

src/components/Layout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export default function Layout() {
+    return (<div className="safe-top safe-left safe-right safe-bottom">
+        <div className="disable-scrollbars max-h-screen h-full overflow-y-scroll">
+            <Outlet />
+        </div>
+    </div >)
+}

src/main.tsx

@@ -1,19 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './index.css'
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-]);
-
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-    {/* <App /> */}
-  </React.StrictMode>,
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
 )