From 4a07879b4e89f44a76600bb78772f7d2ca1acb8c Mon Sep 17 00:00:00 2001
From: Nathaniel Moy <145233084+SnowyNate@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:16:18 -0500
Subject: [PATCH 1/2] Added blank page dependent on light/dark mode to load
 before App rendering

Fixes issue of Unauthenticated Landing page flickering before another page is loaded when signed in.
---
 src/comps/context/UserProvider.tsx | 22 +++++++++++++++++++++-
 src/index.tsx                      |  9 ++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/comps/context/UserProvider.tsx b/src/comps/context/UserProvider.tsx
index a9246af..9025cac 100644
--- a/src/comps/context/UserProvider.tsx
+++ b/src/comps/context/UserProvider.tsx
@@ -1,10 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { supabase } from "../../supabaseClient";
 import UserContext from "./UserContext";
 import { useSnackbar } from "notistack";
+import { ThemeContext } from "./ThemeProvider";
 
 const UserProvider = ({ children }: { children: React.ReactNode }) => {
     const { enqueueSnackbar } = useSnackbar();
+    const { colorMode } = useContext(ThemeContext);
+    const [loading, setLoading] = useState(true);
 
     const [value, setValue] = React.useState<UserContextType>({
         signed_in: false,
@@ -79,6 +82,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
                         "Error logging in. Contact it@stuysu.org for support.",
                         { variant: "error" },
                     );
+                    setLoading(false);
                     return;
                 }
 
@@ -90,6 +94,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
                         "Unverified account. Please contact it@stuysu.org for support.",
                         { variant: "error" },
                     );
+                    setLoading(false);
                     return;
                 }
 
@@ -130,6 +135,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
                         "Error fetching permissions. Contact it@stuysu.org for support.",
                         { variant: "error" },
                     );
+                    setLoading(false);
                 }
                 if (Array.isArray(data) && data?.length > 0) {
                     isAdmin = true;
@@ -150,6 +156,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
                             "Unable to save profile picture to server. Please contact it@stuysu.org for support.",
                             { variant: "error" },
                         );
+                        setLoading(false);
                     }
 
                     enqueueSnackbar("Profile Picture Updated!", {
@@ -176,11 +183,24 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
                     active: user.active,
                 });
             }
+            setLoading(false);
         };
 
         getUser();
     }, [enqueueSnackbar]);
 
+    if (loading) {
+        return (
+            <div
+                style={{
+                    backgroundColor: colorMode ? "#0c161b" : "#ebf5f2",
+                    width: "100vw",
+                    height: "100vh",
+                }}
+            />
+        );
+    }
+
     return (
         <UserContext.Provider value={value}>{children}</UserContext.Provider>
     );
diff --git a/src/index.tsx b/src/index.tsx
index dbdccaf..5626eb3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,11 +3,18 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import UserProvider from "./comps/context/UserProvider";
 
 const root = ReactDOM.createRoot(
     document.getElementById("root") as HTMLElement,
 );
-root.render(<App />);
+root.render(
+    <UserProvider>
+        {" "}
+        {}
+        <App />
+    </UserProvider>,
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

From cad033a3911db626f37daa38164ef9e27e4dc063 Mon Sep 17 00:00:00 2001
From: Nathaniel Moy <145233084+SnowyNate@users.noreply.github.com>
Date: Mon, 20 Jan 2025 15:25:19 -0500
Subject: [PATCH 2/2] Remove unnecessary spaces in index.tsx

---
 src/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 5626eb3..e1f7d41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,8 +10,6 @@ const root = ReactDOM.createRoot(
 );
 root.render(
     <UserProvider>
-        {" "}
-        {}
         <App />
     </UserProvider>,
 );