feat: better loading spinners

package.json

@@ -65,7 +65,6 @@
     "react-dom": "^18.2.0",
     "react-fuzzysort": "^1.0.1",
     "react-promise-suspense": "^0.3.4",
-    "react-spinners": "^0.13.8",
     "satori": "^0.10.13",
     "sharp": "0.33.1",
     "three": "0.159.0",

src/app/tools/components/Loader.tsx

@@ -1,33 +1,22 @@
 import { blackA } from '@radix-ui/colors';
-import { Flex, Text } from '@radix-ui/themes';
+import { Flex, Spinner, Text } from '@radix-ui/themes';
-import { PuffLoader } from 'react-spinners';
 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
+        <Text color="gray">{Math.round(progress * 100)}%</Text>
-          style={{
-            position: 'absolute',
-            left: '50%',
-            top: '50%',
-            transform: 'translate(calc(-50% + 5px), calc(-50% + 5px))',
-          }}
-        >
-          {Math.round(progress * 100)}%
-        </Text>
       )}
-      <PuffLoader color={color ?? theme.colors.solidBackground} />
+    </Flex>
-    </div>
   );
 
   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
+      <Loader naked progress={progress / 100} />
-        naked
-        color={theme.colors.textHighContrast_purple}
-        progress={progress / 100}
-      />
     </Html>
   );
 }

yarn.lock

@@ -4874,11 +4874,6 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-spinners@^0.13.8:
-  version "0.13.8"
-  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
-  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
-
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"