feat(dashboard-v2): prevent flashing dashboard's main screen to unauthenticated users

packages/dashboard-v2/src/layouts/DashboardLayout.js

@@ -7,8 +7,9 @@ import { authenticatedOnly } from "../lib/swrConfig";
 import { PageContainer } from "../components/PageContainer";
 import { NavBar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
+import { UserProvider, useUser } from "../contexts/user";
 
-const Layout = styled.div.attrs({
+const Wrapper = styled.div.attrs({
   className: "min-h-screen overflow-hidden",
 })`
   background-image: url(/images/dashboard-bg.svg);
@@ -16,17 +17,35 @@ const Layout = styled.div.attrs({
   background-repeat: no-repeat;
 `;
 
+const Layout = ({ children }) => {
+  const { user } = useUser();
+
+  // Prevent from flashing the dashboard screen to unauthenticated users.
+  return (
+    <Wrapper>
+      {!user && (
+        <div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
+          <p>Loading...</p> {/* TODO: Do something nicer here */}
+        </div>
+      )}
+      {user && <>{children}</>}
+    </Wrapper>
+  );
+};
+
 const DashboardLayout = ({ children }) => {
   return (
     <>
       <SWRConfig value={authenticatedOnly}>
-        <Layout>
-          <NavBar />
-          <PageContainer>
-            <main className="mt-14">{children}</main>
-          </PageContainer>
-          <Footer />
-        </Layout>
+        <UserProvider>
+          <Layout>
+            <NavBar />
+            <PageContainer>
+              <main className="mt-14">{children}</main>
+            </PageContainer>
+            <Footer />
+          </Layout>
+        </UserProvider>
       </SWRConfig>
     </>
   );

packages/dashboard-v2/src/lib/swrConfig.js

@@ -8,6 +8,7 @@ const redirectUnauthenticated = (key) =>
   fetch(`${baseUrl}/${key}`).then((response) => {
     if (response.status === StatusCodes.UNAUTHORIZED) {
       navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`);
+      return null;
     }
 
     return response.json();