From 900d4b696bd6ba0a4398487d41f228d38e31ed04 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 16:11:16 +0800
Subject: [PATCH] Reduce flicker when loading settings from local storage

---
 .../web/components/templates/NavigationLayout.tsx  | 14 ++++++++++++--
 packages/web/lib/hooks/usePersistedState.tsx       |  6 ++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx
index a1bb2f4ad..c3a8b09d0 100644
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/packages/web/components/templates/NavigationLayout.tsx
@@ -44,7 +44,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
   const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] =
     useState(false)
 
-  const [showNavMenu, setShowNavMenu] = usePersistedState<boolean>({
+  const [showNavMenu, setShowNavMenu, isLoading] = usePersistedState<boolean>({
     key: 'nav-show-menu',
     isSessionStorage: false,
     initialValue: true,
@@ -111,6 +111,16 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     }
   }, [showLogout])
 
+  if (isLoading) {
+    return (
+      <HStack
+        css={{ width: '100vw', height: '100vh' }}
+        distribution="start"
+        alignment="start"
+      ></HStack>
+    )
+  }
+
   return (
     <HStack
       css={{ width: '100vw', height: '100vh' }}
@@ -133,7 +143,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
           }}
         />
       </SpanBox>
-      {showNavMenu && (
+      {!isLoading && showNavMenu && (
         <NavigationMenu
           section={props.section}
           // eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/packages/web/lib/hooks/usePersistedState.tsx b/packages/web/lib/hooks/usePersistedState.tsx
index 59f506dac..0aa5b6097 100644
--- a/packages/web/lib/hooks/usePersistedState.tsx
+++ b/packages/web/lib/hooks/usePersistedState.tsx
@@ -8,9 +8,10 @@ export function usePersistedState<T>({
   key: string
   initialValue: T
   isSessionStorage?: boolean
-}): [T, (x: T | ((prev: T) => T)) => void] {
+}): [T, (x: T | ((prev: T) => T)) => void, boolean] {
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
+  const [isLoading, setIsLoading] = useState(true)
   const [storedValue, setStoredValue] = useState(initialValue)
 
   useEffect(() => {
@@ -27,6 +28,7 @@ export function usePersistedState<T>({
       if (item) {
         setStoredValue(JSON.parse(item))
       }
+      setIsLoading(false)
     } catch (error) {
       // If error also return initialValue
       console.log(error)
@@ -56,5 +58,5 @@ export function usePersistedState<T>({
     }
   }
 
-  return [storedValue, setValue]
+  return [storedValue, setValue, isLoading]
 }