feat: unified loader

package.json

@@ -59,6 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fuzzysort": "^1.0.1",
+    "react-spinners": "^0.13.8",
     "satori": "^0.10.8",
     "sharp": "^0.33.1",
     "three": "^0.159.0",

src/app/tools/components/Loader.tsx

@@ -0,0 +1,37 @@
+import { blackA } from '@radix-ui/colors';
+import { Flex } 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;
+}
+
+export function Loader({ naked, color }: LoaderProps) {
+  const animation = (
+    <PuffLoader color={color ?? theme.colors.solidBackground} />
+  );
+
+  if (naked) return animation;
+
+  return (
+    <Flex
+      style={{
+        backgroundColor: blackA.blackA10,
+        position: 'fixed',
+        top: NAV_HEIGHT,
+        left: 0,
+        width: '100%',
+        height: `calc(100% - ${NAV_HEIGHT}px)`,
+        padding: theme.spaces.paddingMajor,
+      }}
+      align="center"
+      justify="center"
+    >
+      {animation}
+    </Flex>
+  );
+}

src/app/tools/layout.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { TOOLS } from '../../constants/tools';
 import { theme } from '../../stitches.config';
+import { Loader } from './components/Loader';
 
 interface ToolsLayoutProps {
   children: ReactNode;
@@ -63,7 +64,7 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
         </span>
       </div>
 
-      {children}
+      <Suspense fallback={<Loader />}>{children}</Suspense>
     </>
   );
 }

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

@@ -1,29 +0,0 @@
-import { Html, useProgress } from '@react-three/drei';
-import { theme } from '../../../../../stitches.config';
-
-export function Loader() {
-  const { progress } = useProgress();
-
-  return (
-    <Html center>
-      <div
-        style={{
-          width: 160,
-          height: 16,
-          backgroundColor: theme.colors.appBackground1_light,
-          borderRadius: 8,
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          style={{
-            width: `${Math.round(progress)}%`,
-            height: '100%',
-            backgroundColor: theme.colors.solidBackground_purple,
-            transition: 'width 0.1s',
-          }}
-        ></div>
-      </div>
-    </Html>
-  );
-}

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

@@ -64,7 +64,7 @@ export const TankModel = forwardRef<Group, TankModelProps>(
 
     return (
       <HullContainer
-        objects={gltf.scene.children[0].children}
+        objects={Object.values(gltf.nodes)}
         yaw={model.hullYaw}
         ref={hullContainer}
         onYawStart={() =>
@@ -93,7 +93,7 @@ export const TankModel = forwardRef<Group, TankModelProps>(
           initialTurretRotation={tankModelDefinition.turretRotation}
           gunOrigin={gunOrigin}
           ref={turretContainer}
-          objects={gltf.scene.children[0].children}
+          objects={Object.values(gltf.nodes)}
           model={turretModelDefinition.model}
           onYawStart={() =>
             mutateTankopedia((state) => {
@@ -136,7 +136,7 @@ export const TankModel = forwardRef<Group, TankModelProps>(
             gunOrigin={gunOrigin}
             pitch={model.gunPitch}
             model={gunModelDefinition.model}
-            objects={gltf.scene.children[0].children}
+            objects={Object.values(gltf.nodes)}
             turretOrigin={turretOrigin}
           />
         </TurretContainer>

src/app/tools/tankopedia/[id]/page.tsx

@@ -19,6 +19,7 @@ import {
   Theme,
   Tooltip,
 } from '@radix-ui/themes';
+import { Html } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
@@ -34,9 +35,10 @@ import {
   tankDefinitions,
   tankNamesDiacritics,
 } from '../../../../core/blitzkrieg/tankDefinitions';
+import { theme } from '../../../../stitches.config';
+import { Loader } from '../../components/Loader';
 import * as styles from '../page.css';
 import { Controls } from './components/Control';
-import { Loader } from './components/Loader';
 import { RotationInputs } from './components/RotationInputs';
 import { SceneProps } from './components/SceneProps';
 import { TankModel } from './components/TankModel';
@@ -115,9 +117,18 @@ export default function Page({ params }: { params: { id: string } }) {
                   onPointerDown={handlePointerDown}
                 >
                   <Controls />
+                  <SceneProps />
 
-                  <Suspense fallback={<Loader />}>
-                    <SceneProps />
+                  <Suspense
+                    fallback={
+                      <Html center position={[0, 1.5, 0]}>
+                        <Loader
+                          naked
+                          color={theme.colors.textHighContrast_purple}
+                        />
+                      </Html>
+                    }
+                  >
                     <TankModel
                       gunId={gun.id}
                       tankId={tank.id}

yarn.lock

@@ -5280,6 +5280,11 @@ [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"