feat: loading number

src/app/tools/components/Loader.tsx

@@ -1,5 +1,5 @@
 import { blackA } from '@radix-ui/colors';
-import { Flex } from '@radix-ui/themes';
+import { Flex, Text } from '@radix-ui/themes';
 import { PuffLoader } from 'react-spinners';
 import { theme } from '../../../stitches.config';
 
@@ -8,11 +8,26 @@ const NAV_HEIGHT = 52.65;
 interface LoaderProps {
   naked?: boolean;
   color?: string;
+  progress?: number;
 }
 
-export function Loader({ naked, color }: LoaderProps) {
+export function Loader({ naked, color, progress }: LoaderProps) {
   const animation = (
-    <PuffLoader color={color ?? theme.colors.solidBackground} />
+    <div style={{ position: 'relative' }}>
+      {progress !== undefined && (
+        <Text
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(calc(-50% + 4px), calc(-50% + 4px))',
+          }}
+        >
+          {Math.round(progress * 100)}%
+        </Text>
+      )}
+      <PuffLoader color={color ?? theme.colors.solidBackground} />
+    </div>
   );
 
   if (naked) return animation;

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

@@ -1,24 +1,22 @@
 import { Card, Flex, Tabs, Theme } from '@radix-ui/themes';
-import { Html } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { Suspense, use, useEffect, useRef, useState } from 'react';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkrieg/pose';
-import { theme } from '../../../../../../stitches.config';
 import {
   TankopediaMode,
   mutateTankopediaTemporary,
   useTankopediaTemporary,
 } from '../../../../../../stores/tankopedia';
-import { Loader } from '../../../../components/Loader';
 import { Duel } from '../../page';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { QuickEquipments } from '../QuickEquipments';
 import { RotationInputs } from '../RotationInputs';
 import { SceneProps } from '../SceneProps';
+import { ModelLoader } from './components/ModelLoader';
 import { Options } from './components/Options';
 import { TankArmor } from './components/TankArmor';
 import { TankModel } from './components/TankModel';
@@ -164,16 +162,7 @@ export function TankSandbox({ duel }: TankSandboxProps) {
                 <SceneProps />
                 <Lighting duel={duel} />
 
-                <Suspense
+                <Suspense fallback={<ModelLoader />}>
-                  fallback={
-                    <Html center position={[0, 1.5, 0]}>
-                      <Loader
-                        naked
-                        color={theme.colors.textHighContrast_purple}
-                      />
-                    </Html>
-                  }
-                >
                   <TankModel duel={duel} />
                   <TankArmor duel={duel} />
                 </Suspense>

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

@@ -0,0 +1,17 @@
+import { Html, useProgress } from '@react-three/drei';
+import { theme } from '../../../../../../../stitches.config';
+import { Loader } from '../../../../../components/Loader';
+
+export function ModelLoader() {
+  const { progress } = useProgress();
+
+  return (
+    <Html center position={[0, 1.5, 0]}>
+      <Loader
+        naked
+        color={theme.colors.textHighContrast_purple}
+        progress={progress / 100}
+      />
+    </Html>
+  );
+}