From 793c07d1ed54d14ba154ff6fc974eb8295ec8e66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 13 Jul 2024 20:01:45 -0500
Subject: [PATCH] fix: shot display suspense

---
 .../tankopedia/[id]/components/Model/TankSandbox.tsx | 12 +++++++++---
 .../[id]/components/Model/components/ModelLoader.tsx |  8 +++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
index f0fe0a34b..7320bab3a 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+++ b/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>
   );
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx
index ba6110ac9..0eea6c02f 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx
@@ -1,12 +1,10 @@
-import { Progress } from '@radix-ui/themes';
-import { Html, useProgress } from '@react-three/drei';
+import { Spinner } from '@radix-ui/themes';
+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>
   );
 }