From 5bbb59d5dc7d086b086b0116f8a572e092903937 Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Wed, 27 Sep 2023 14:57:10 +0200
Subject: [PATCH] fix: fixed the loading issue by adding a suspense (#510)

---
 src/hooks/useLocalStorage.ts | 23 +++++++++++++----------
 src/pages/_layout.tsx        | 11 ++++++-----
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index ad27dfb3..7d032e2c 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -35,18 +35,21 @@ export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (v
     }
   }, [updateValue])
 
-  const setValue = useCallback((value: T) => {
-    try {
-      updateValue(value)
+  const setValue = useCallback(
+    (value: T) => {
+      try {
+        updateValue(value)
 
-      localStorage.setItem(keyRef.current, JSON.stringify(value))
-      if (typeof window !== 'undefined') {
-        window.dispatchEvent(new StorageEvent('storage', { key: keyRef.current }))
+        localStorage.setItem(keyRef.current, JSON.stringify(value))
+        if (typeof window !== 'undefined') {
+          window.dispatchEvent(new StorageEvent('storage', { key: keyRef.current }))
+        }
+      } catch (e) {
+        console.error(e)
       }
-    } catch (e) {
-      console.error(e)
-    }
-  }, [])
+    },
+    [updateValue],
+  )
 
   return [value, setValue]
 }
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 6ba8512d..90a895b8 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -1,12 +1,12 @@
 import classNames from 'classnames'
 import { isMobile } from 'react-device-detect'
 import { useLocation } from 'react-router-dom'
+import { Suspense } from 'react'
 
 import AccountDetails from 'components/Account/AccountDetails'
 import Background from 'components/Background'
 import Footer from 'components/Footer'
 import DesktopHeader from 'components/Header/DesktopHeader'
-import MigrationBanner from 'components/MigrationBanner'
 import ModalsContainer from 'components/Modals/ModalsContainer'
 import PageMetadata from 'components/PageMetadata'
 import Toaster from 'components/Toaster'
@@ -65,10 +65,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           isMobile && 'items-start',
         )}
       >
-        <PageContainer focusComponent={focusComponent} fullWidth={isFullWidth}>
-          {children}
-        </PageContainer>
-
+        <Suspense>
+          <PageContainer focusComponent={focusComponent} fullWidth={isFullWidth}>
+            {children}
+          </PageContainer>
+        </Suspense>
         <AccountDetails />
       </main>
       <Footer />