From cb6ce4f183209dd22e328b3512ffce452696c783 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:01:45 -0600
Subject: [PATCH] feat: unified loader
---
package.json | 1 +
src/app/tools/components/Loader.tsx | 37 +++++++++++++++++++
src/app/tools/layout.tsx | 5 ++-
.../tankopedia/[id]/components/Loader.tsx | 29 ---------------
.../tankopedia/[id]/components/TankModel.tsx | 6 +--
src/app/tools/tankopedia/[id]/page.tsx | 17 +++++++--
yarn.lock | 5 +++
7 files changed, 63 insertions(+), 37 deletions(-)
create mode 100644 src/app/tools/components/Loader.tsx
delete mode 100644 src/app/tools/tankopedia/[id]/components/Loader.tsx
diff --git a/package.json b/package.json
index 8f2e955ee..2e0991d8a 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/tools/components/Loader.tsx b/src/app/tools/components/Loader.tsx
new file mode 100644
index 000000000..fd293d61f
--- /dev/null
+++ b/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 = (
+
+ );
+
+ if (naked) return animation;
+
+ return (
+
+ {animation}
+
+ );
+}
diff --git a/src/app/tools/layout.tsx b/src/app/tools/layout.tsx
index ebaae8f62..9b7ee134d 100644
--- a/src/app/tools/layout.tsx
+++ b/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) {
- {children}
+ }>{children}
);
}
diff --git a/src/app/tools/tankopedia/[id]/components/Loader.tsx b/src/app/tools/tankopedia/[id]/components/Loader.tsx
deleted file mode 100644
index aeff48822..000000000
--- a/src/app/tools/tankopedia/[id]/components/Loader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Html, useProgress } from '@react-three/drei';
-import { theme } from '../../../../../stitches.config';
-
-export function Loader() {
- const { progress } = useProgress();
-
- return (
-
-
-
- );
-}
diff --git a/src/app/tools/tankopedia/[id]/components/TankModel.tsx b/src/app/tools/tankopedia/[id]/components/TankModel.tsx
index 7a1e47c6e..21a865932 100644
--- a/src/app/tools/tankopedia/[id]/components/TankModel.tsx
+++ b/src/app/tools/tankopedia/[id]/components/TankModel.tsx
@@ -64,7 +64,7 @@ export const TankModel = forwardRef(
return (
@@ -93,7 +93,7 @@ export const TankModel = forwardRef(
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(
gunOrigin={gunOrigin}
pitch={model.gunPitch}
model={gunModelDefinition.model}
- objects={gltf.scene.children[0].children}
+ objects={Object.values(gltf.nodes)}
turretOrigin={turretOrigin}
/>
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 5a26a0084..022a293e7 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/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}
>
+
- }>
-
+
+
+