feat: better loader

src/app/tools/tankopedia/[id]/components/Control.tsx

@@ -59,7 +59,7 @@ export function Controls() {
   const [autoRotate, setAutoRotate] = useState(true);
 
   useEffect(() => {
-    camera.position.set(-10, 12, -12);
+    camera.position.set(-10, 5, -12);
     orbitControls.current?.target.set(0, 1.25, 0);
   }, [camera]);
 

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

@@ -110,7 +110,6 @@ export function HeroSection({ id }: { id: number }) {
             <Box width="100%" height="100%">
               <Suspense fallback={<TankSandboxLoader id={id} />}>
                 <TankSandbox />
-                <TankSandboxLoader id={id} />
               </Suspense>
             </Box>
 

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

@@ -1,11 +1,21 @@
-import { Flex, Spinner } from '@radix-ui/themes';
+import { Flex, Progress } from '@radix-ui/themes';
+import { useProgress } from '@react-three/drei';
 import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
 
 export function TankSandboxLoader({ id }: { id: number }) {
+  const data = useProgress();
+
   return (
     <Flex width="100%" height="100%" align="center" justify="center">
-      <img src={tankIcon(id)} style={{ height: '75%', filter: 'blur(0rem)' }} />
-      <Spinner size="3" style={{ position: 'absolute' }} />
+      <img
+        src={tankIcon(id)}
+        style={{ height: '60%', filter: 'blur(4px) grayscale(1)' }}
+      />
+      <Progress
+        size="3"
+        value={data.progress}
+        style={{ position: 'absolute', width: 128 }}
+      />
     </Flex>
   );
 }