feat: better loading spinners

src/app/tools/components/Loader.tsx

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

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

@@ -202,7 +202,6 @@ export function TankSandbox() {
                     <SceneProps />
 
                     <Suspense fallback={<ModelLoader />}>
-                      {/* TODO: add rotation cube to the top right */}
                       <Lighting />
                       <TankModel />
                       <Armor />

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

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