Loading Page Feedback

components/Layout/BaseLayout/BaseLayout.tsx

@@ -5,26 +5,35 @@ import CameraFeed from "../../CameraFeed"
 import CameraFeedProvider from "../../../providers/CameraFeedProvider"
 import DateSelect from "../../DateSelect"
 import DateSelectProvider from "../../../providers/DateSelectProvider"
+import { usePageLoad } from "../../../providers/PageLoadProvider"
 
-const BaseLayout = ({ entered = false, children }: ILayout) => (
-  <div className="w-screen h-screen p-[50px]">
-    <div className="flex flex-col h-[calc(100vh-145px)] gap-y-[5px]">
-      <Navbar />
-      <div className="flex flex-grow h-full gap-x-[20px]">
-        <div className="flex-grow w-[calc(100vw-490px)]">{children}</div>
-        <div className="w-[370px] flex flex-col gap-y-[20px]">
-          <div className="border-[#d2d2d2] border-[2px] h-[calc(100%-280px)] py-[10px] overflow-y-auto">
-            <CameraFeedProvider>{entered && <CameraFeed />}</CameraFeedProvider>
-          </div>
-          <div className="border-[#d2d2d2] border-[2px]">
-            <DateSelectProvider>
-              <DateSelect />
-            </DateSelectProvider>
-          </div>
+const BaseLayout = ({ children }: ILayout) => {
+  const { entered } = usePageLoad()
+
+  return (
+    <div className="w-screen h-screen p-[50px]">
+      <div className="flex flex-col h-[calc(100vh-145px)] gap-y-[5px]">
+        {entered && <Navbar />}
+        <div className="flex flex-grow h-full gap-x-[20px]">
+          <div className="flex-grow w-[calc(100vw-490px)]">{children}</div>
+          {entered && (
+            <div className="w-[370px] flex flex-col gap-y-[20px]">
+              <div className="border-[#d2d2d2] border-[2px] h-[calc(100%-280px)] py-[10px] overflow-y-auto">
+                <CameraFeedProvider>
+                  <CameraFeed />
+                </CameraFeedProvider>
+              </div>
+              <div className="border-[#d2d2d2] border-[2px]">
+                <DateSelectProvider>
+                  <DateSelect />
+                </DateSelectProvider>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default BaseLayout

components/Layout/index.tsx

@@ -11,10 +11,10 @@ interface ILayoutFactory extends ILayout {
   type: keyof typeof layoutContainers
 }
 
-function Layout({ children, type, entered = false }: ILayoutFactory) {
+function Layout({ children, type }: ILayoutFactory) {
   const Container = layoutContainers[type]
 
-  return <Container entered={entered}>{children}</Container>
+  return <Container>{children}</Container>
 }
 
 export default Layout

components/Layout/types.ts

@@ -2,5 +2,4 @@ import { ReactNode } from "react"
 
 export interface ILayout {
   children: ReactNode
-  entered?: boolean
 }

components/Pages/LandingPage/LandingPage.tsx

@@ -1,29 +1,30 @@
-import { useState, useEffect } from "react"
+import { useEffect } from "react"
 import LandingCard from "../../LandingCard"
 import Layout from "../../Layout"
 import SeoHead from "../../SeoHead"
 import LoadingPage from "../../LoadingPage"
 import useIsMobile from "../../../hooks/useIsMobile"
+import { usePageLoad } from "../../../providers/PageLoadProvider"
 
 const LandingPage = () => {
-  const [entered, setEntered] = useState(false)
+  const { entered, setEntered } = usePageLoad()
+
   const isMobile = useIsMobile()
 
   useEffect(() => {
-    // Add event listener for the entire page
     const handlePageClick = () => setEntered(true)
     if (!entered) {
       window.addEventListener("click", handlePageClick)
     }
 
-    // Cleanup the event listener
     return () => {
       window.removeEventListener("click", handlePageClick)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entered])
 
   return (
-    <Layout type={isMobile ? "mobile" : "base"} entered={entered}>
+    <Layout type={isMobile ? "mobile" : "base"}>
       <SeoHead title="HENO. HOME" />
 
       <div

pages/_app.tsx

@@ -17,6 +17,7 @@ import { Analytics } from "@vercel/analytics/react"
 import Swiper, { Mousewheel } from "swiper"
 import { ThemeProvider } from "../providers/ThemeProvider"
 import { TITLE } from "../lib/consts"
+import PageLoadProvider from "../providers/PageLoadProvider"
 
 Swiper.use([Mousewheel])
 
@@ -54,13 +55,15 @@ function MyApp({ Component, pageProps }: AppProps) {
           overlayBlur: "small",
         })}
       >
-        <ThemeProvider>
-          <SessionProvider>
-            <Component {...pageProps} />
-            <ToastContainer />
-            <Analytics />
-          </SessionProvider>
-        </ThemeProvider>
+        <PageLoadProvider>
+          <ThemeProvider>
+            <SessionProvider>
+              <Component {...pageProps} />
+              <ToastContainer />
+              <Analytics />
+            </SessionProvider>
+          </ThemeProvider>
+        </PageLoadProvider>
       </RainbowKitProvider>
     </WagmiConfig>
   )

providers/PageLoadProvider.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useMemo, useState } from "react"
+
+const PageLoadContext = createContext(null)
+
+const PageLoadProvider = ({ children }) => {
+  const [entered, setEntered] = useState(false)
+
+  const value = useMemo(
+    () => ({
+      entered,
+      setEntered
+    }),
+    [
+      entered,
+      setEntered
+    ],
+  )
+
+  return <PageLoadContext.Provider value={value}>{children}</PageLoadContext.Provider>
+}
+
+export const usePageLoad = () => {
+  const context = useContext(PageLoadContext)
+  if (!context) {
+    throw new Error("usePageLoad must be used within a PageLoadProvider")
+  }
+  return context
+}
+
+export default PageLoadProvider