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,10 +17,27 @@ 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}>
+        <UserProvider>
           <Layout>
             <NavBar />
             <PageContainer>
@@ -27,6 +45,7 @@ const DashboardLayout = ({ children }) => {
             </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();