add: loading

src/pages/page.tsx

@@ -1,12 +1,36 @@
-import { Suspense } from "react";
+import { Suspense, useCallback, useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import * as THREE from "three";
 import { DebugPerf } from "@/components/debug/DebugPerf";
 import { GameUI } from "@/components/ui/GameUI";
+import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
 import { HandTrackingProvider } from "@/providers/gameplay/HandTrackingProvider";
+import {
+  INITIAL_SCENE_LOADING_STATE,
+  type SceneLoadingState,
+} from "@/types/world/sceneLoading";
 import { World } from "@/world/World";
 
 export function HomePage(): React.JSX.Element {
+  const [sceneLoadingState, setSceneLoadingState] = useState<SceneLoadingState>(
+    INITIAL_SCENE_LOADING_STATE,
+  );
+  const handleSceneLoadingStateChange = useCallback(
+    (nextState: SceneLoadingState) => {
+      setSceneLoadingState((currentState) => {
+        const shouldRestartProgress = currentState.status === "ready";
+
+        return {
+          ...nextState,
+          progress: shouldRestartProgress
+            ? nextState.progress
+            : Math.max(currentState.progress, nextState.progress),
+        };
+      });
+    },
+    [],
+  );
+
   return (
     <HandTrackingProvider>
       <Canvas
@@ -14,11 +38,12 @@ export function HomePage(): React.JSX.Element {
         shadows={{ type: THREE.PCFShadowMap }}
       >
         <Suspense fallback={null}>
-          <World />
+          <World onLoadingStateChange={handleSceneLoadingStateChange} />
           <DebugPerf />
         </Suspense>
       </Canvas>
       <GameUI />
+      <SceneLoadingOverlay state={sceneLoadingState} />
     </HandTrackingProvider>
   );
 }