update: loading waiting

src/components/game/GameFlow.tsx

@@ -1,21 +1,20 @@
 import { useEffect, useRef } from "react";
-import { AudioManager } from "@/managers/AudioManager";
 import { useGameStore } from "@/managers/stores/useGameStore";
-import { AUDIO_PATHS } from "@/data/audioConfig";
 
 export function GameFlow(): null {
   const step = useGameStore((state) => state.intro.currentStep);
   const setStep = useGameStore((state) => state.setIntroStep);
   const isCinematicPlaying = useGameStore((state) => state.isCinematicPlaying);
+  const sceneReady = useGameStore((state) => state.sceneReady);
   const setCanMove = useGameStore((state) => state.setCanMove);
   const hasInitialized = useRef(false);
 
   useEffect(() => {
-    if (!hasInitialized.current && step === "intro") {
+    if (!hasInitialized.current && step === "intro" && sceneReady) {
       hasInitialized.current = true;
       setStep("sequence_video");
     }
-  }, [step, setStep]);
+  }, [step, setStep, sceneReady]);
 
   useEffect(() => {
     if (step === "sequence_video" && !isCinematicPlaying) {

src/managers/stores/useGameStore.ts

@@ -34,6 +34,7 @@ interface MissionFlowState {
 interface GameState {
   mainState: MainGameState;
   isCinematicPlaying: boolean;
+  sceneReady: boolean;
   missionFlow: MissionFlowState;
   intro: IntroState;
   bike: MissionState & {
@@ -56,6 +57,7 @@ interface GameState {
 interface GameActions {
   setMainState: (mainState: MainGameState) => void;
   setCinematicPlaying: (isCinematicPlaying: boolean) => void;
+  setSceneReady: (sceneReady: boolean) => void;
   hideDialog: () => void;
   setActivityCity: (activityCity: boolean) => void;
   setCanMove: (canMove: boolean) => void;
@@ -219,6 +221,7 @@ function createInitialGameState(): GameState {
   return {
     mainState: "intro",
     isCinematicPlaying: false,
+    sceneReady: false,
     missionFlow: {
       activityCity: true,
       canMove: false,
@@ -257,6 +260,7 @@ export const useGameStore = create<GameStore>()((set) => ({
   ...createInitialGameState(),
   setMainState: (mainState) => set({ mainState }),
   setCinematicPlaying: (isCinematicPlaying) => set({ isCinematicPlaying }),
+  setSceneReady: (sceneReady) => set({ sceneReady }),
   hideDialog: () =>
     set((state) => ({
       missionFlow: { ...state.missionFlow, dialogMessage: null },

src/pages/page.tsx

@@ -19,6 +19,7 @@ export function HomePage(): React.JSX.Element {
     (state) => state.missionFlow.dialogMessage,
   );
   const hideDialog = useGameStore((state) => state.hideDialog);
+  const setSceneReady = useGameStore((state) => state.setSceneReady);
   const [sceneLoadingState, setSceneLoadingState] = useState<SceneLoadingState>(
     INITIAL_SCENE_LOADING_STATE,
   );
@@ -42,13 +43,17 @@ export function HomePage(): React.JSX.Element {
           return currentState;
         }
 
+        if (nextState.status === "ready" && currentState.status !== "ready") {
+          setSceneReady(true);
+        }
+
         return {
           ...nextState,
           progress: Math.max(currentState.progress, nextState.progress),
         };
       });
     },
-    [],
+    [setSceneReady],
   );
 
   return (