move LoadingSpinner

app/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, Suspense } from "react";
+import { useState, useEffect, useCallback, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { Canvas } from "@react-three/fiber";
 import { EffectComposer, N8AO } from "@react-three/postprocessing";
@@ -25,6 +25,7 @@ function MapInspector() {
   const [missionName, setMissionName] = useState(
     searchParams.get("mission") || "TWL2_WoodyMyrk",
   );
+  const [isLoading, setIsLoading] = useState(true);
 
   // Update query params when state changes
   useEffect(() => {
@@ -33,15 +34,24 @@ function MapInspector() {
     router.replace(`?${params.toString()}`, { scroll: false });
   }, [missionName, router]);
 
+  const handleLoadingChange = useCallback((loading: boolean) => {
+    setIsLoading(loading);
+  }, []);
+
   return (
     <QueryClientProvider client={queryClient}>
       <main>
         <SettingsProvider>
           <div id="canvasContainer">
+            {isLoading && <div className="LoadingSpinner" />}
             <Canvas shadows frameloop="always">
               <CamerasProvider>
                 <AudioProvider>
-                  <Mission key={missionName} name={missionName} />
+                  <Mission
+                    key={missionName}
+                    name={missionName}
+                    onLoadingChange={handleLoadingChange}
+                  />
                   <ObserverCamera />
                   <DebugElements />
                   <ObserverControls />

app/style.css

@@ -257,3 +257,24 @@ main {
   color: rgba(255, 255, 255, 0.5);
   text-align: center;
 }
+
+.LoadingSpinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(255, 255, 255, 0.2);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: LoadingSpinner-spin 1s linear infinite;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes LoadingSpinner-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}