From f0b905593c54526ca26892eba06ca32b58ec5b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:43:54 -0500
Subject: [PATCH] feat: better loading spinners

---
 package.json                                  |  1 -
 src/app/tools/components/Loader.tsx           | 23 +++++--------------
 .../[id]/components/Model/TankSandbox.tsx     |  1 -
 .../Model/components/ModelLoader.tsx          |  7 +-----
 yarn.lock                                     |  5 ----
 5 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 1331f1611..c5df1172c 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/tools/components/Loader.tsx b/src/app/tools/components/Loader.tsx
index 468658c90..a92cb0da3 100644
--- a/src/app/tools/components/Loader.tsx
+++ b/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;
diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
index a4897ec19..0c9931c8d 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+++ b/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 />
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 1e93ac2ef..a7d992543 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx
+++ b/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>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index a30a989ad..897a57873 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4874,11 +4874,6 @@ react-remove-scroll@2.5.5:
     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"