fix: shot display suspense

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -1,6 +1,6 @@
 import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
-import { use, useEffect, useRef } from 'react';
+import { Suspense, use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
 import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
@@ -13,6 +13,7 @@ import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemer
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { SceneProps } from '../SceneProps';
+import { ModelLoader } from './components/ModelLoader';
 import { TankModel } from './components/TankModel';
 
 export function TankSandbox() {
@@ -140,9 +141,14 @@ export function TankSandbox() {
       <Controls />
       <SceneProps />
 
-      <Lighting />
       <TankModel />
-      <Armor />
+
+      {/* idk why the shot display doesn't work without suspense here lol */}
+      <Suspense fallback={<ModelLoader />}>
+        <Armor />
+        <Lighting />
+      </Suspense>
+
       <ShotDisplay />
     </Canvas>
   );

src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx

@@ -1,12 +1,10 @@
-import { Progress } from '@radix-ui/themes';
+import { Spinner } from '@radix-ui/themes';
-import { Html, useProgress } from '@react-three/drei';
+import { Html } from '@react-three/drei';
 
 export function ModelLoader() {
-  const { progress } = useProgress();
-
   return (
     <Html center position={[0, 1.5, 0]}>
-      <Progress value={progress} style={{ width: 160 }} />
+      <Spinner size="3" />
     </Html>
   );
 }