src/components/ui/SceneLoadingOverlay.tsx

@@ -9,6 +9,7 @@ export function SceneLoadingOverlay({
 }: SceneLoadingOverlayProps): React.JSX.Element | null {
   const isReady = state.status === "ready";
   const progress = Math.round(Math.max(0, Math.min(1, state.progress)) * 100);
+  const helperText = getLoadingHelperText(state.progress);
 
   return (
     <div
@@ -17,6 +18,7 @@ export function SceneLoadingOverlay({
     >
       <div className="scene-loading-overlay__content">
         <strong>{state.currentStep}</strong>
+        <p>{helperText}</p>
         <div className="scene-loading-overlay__track">
           <span style={{ width: `${progress}%` }} />
           <em>{progress}%</em>
@@ -25,3 +27,19 @@ export function SceneLoadingOverlay({
     </div>
   );
 }
+
+function getLoadingHelperText(progress: number): string {
+  if (progress >= 0.95) {
+    return "Finalisation de la scène et de la première frame.";
+  }
+
+  if (progress >= 0.7) {
+    return "Préparation des collisions et du gameplay.";
+  }
+
+  if (progress >= 0.25) {
+    return "Chargement progressif de la map autour du joueur.";
+  }
+
+  return "Récupération des données et modèles nécessaires.";
+}

src/index.css

@@ -466,6 +466,16 @@ canvas {
   text-transform: uppercase;
 }
 
+.scene-loading-overlay p {
+  max-width: 290px;
+  margin: -8px 0 0;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  text-align: center;
+}
+
 .scene-loading-overlay__track {
   position: relative;
   overflow: hidden;

src/providers/gameplay/HandTrackingProvider.tsx

@@ -24,9 +24,6 @@ export function HandTrackingProvider({
   children: ReactNode;
 }): React.JSX.Element {
   const sceneMode = useSceneMode();
-  const handTrackingSource = useDebugStore((debug) =>
-    debug.getHandTrackingSource(),
-  );
   const repairNeedsHands = useGameStore((state) => {
     switch (state.mainState) {
       case "bike":
@@ -44,20 +41,34 @@ export function HandTrackingProvider({
   const enabled =
     repairNeedsHands ||
     (sceneMode === "physics" && (nearby || holding || handHolding));
+
+  if (!enabled) {
+    return (
+      <HandTrackingContext value={HAND_TRACKING_IDLE_SNAPSHOT}>
+        {children}
+      </HandTrackingContext>
+    );
+  }
+
+  return <ActiveHandTrackingProvider>{children}</ActiveHandTrackingProvider>;
+}
+
+function ActiveHandTrackingProvider({
+  children,
+}: {
+  children: ReactNode;
+}): React.JSX.Element {
+  const handTrackingSource = useDebugStore((debug) =>
+    debug.getHandTrackingSource(),
+  );
   const backendSnapshot = useRemoteHandTracking({
-    enabled: enabled && handTrackingSource === "backend",
+    enabled: handTrackingSource === "backend",
   });
   const browserSnapshot = useBrowserHandTracking({
-    enabled: enabled && handTrackingSource === "browser",
+    enabled: handTrackingSource === "browser",
   });
   const snapshot =
     handTrackingSource === "browser" ? browserSnapshot : backendSnapshot;
 
-  return (
-    <HandTrackingContext
-      value={enabled ? snapshot : HAND_TRACKING_IDLE_SNAPSHOT}
-    >
-      {children}
-    </HandTrackingContext>
-  );
+  return <HandTrackingContext value={snapshot}>{children}</HandTrackingContext>;
 }

src/utils/debug/Debug.ts

@@ -103,7 +103,6 @@ export class Debug {
 
     if (this.gui) {
       this.gui.open();
-      this.createOrderedFolders();
 
       this.gui
         .add(this.controls, "cameraMode", { Player: "player", Debug: "debug" })
@@ -137,6 +136,8 @@ export class Debug {
           this.emit();
         });
 
+      this.createOrderedFolders();
+
       const handTrackingFolder = this.createFolder("Hand Tracking");
 
       handTrackingFolder