feat: better loading

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

@@ -59,7 +59,7 @@ export function Controls() {
   const [autoRotate, setAutoRotate] = useState(true);
 
   useEffect(() => {
-    camera.position.set(-4, 4, -16);
+    camera.position.set(-10, 12, -12);
     orbitControls.current?.target.set(0, 1.25, 0);
   }, [camera]);
 

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

@@ -1,15 +1,17 @@
 import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
 import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
+import { Suspense } from 'react';
 import { classIcons } from '../../../../../../components/ClassIcon';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import strings from '../../../../../../lang/en-US.json';
 import * as Duel from '../../../../../../stores/duel';
-import { TankSandbox } from './TankSandbox';
 import { Options } from './components/Options';
+import { TankSandbox } from './TankSandbox';
+import { TankSandboxLoader } from './TankSandboxLoader';
 
-export function HeroSection() {
+export function HeroSection({ id }: { id: number }) {
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const antagonist = Duel.use((state) => state.antagonist.tank);
   const compareTanks =
@@ -106,7 +108,10 @@ export function HeroSection() {
         >
           <Box width="100%" height="100%" position="absolute">
             <Box width="100%" height="100%">
-              <TankSandbox />
+              <Suspense fallback={<TankSandboxLoader id={id} />}>
+                <TankSandbox />
+                <TankSandboxLoader id={id} />
+              </Suspense>
             </Box>
 
             <Options />

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

@@ -1,6 +1,6 @@
 import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
-import { Suspense, use, useEffect, useRef } from 'react';
+import { use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
@@ -12,7 +12,6 @@ import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemer
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { SceneProps } from '../SceneProps';
-import { ModelLoader } from './components/ModelLoader';
 import { TankModel } from './components/TankModel';
 
 export function TankSandbox() {
@@ -140,11 +139,9 @@ export function TankSandbox() {
       <Controls />
       <SceneProps />
 
-      <Suspense fallback={<ModelLoader />}>
+      <Lighting />
-        <Lighting />
+      <TankModel />
-        <TankModel />
+      <Armor />
-        <Armor />
-      </Suspense>
     </Canvas>
   );
 }

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

@@ -0,0 +1,11 @@
+import { Flex, Spinner } from '@radix-ui/themes';
+import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
+
+export function TankSandboxLoader({ id }: { id: number }) {
+  return (
+    <Flex width="100%" height="100%" align="center" justify="center">
+      <img src={tankIcon(id)} style={{ height: '75%', filter: 'blur(0rem)' }} />
+      <Spinner size="3" style={{ position: 'absolute' }} />
+    </Flex>
+  );
+}

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

@@ -13,7 +13,7 @@ import { TechTreeSection } from './components/Model/TechTreeSection';
 import { ShotDisplaySection } from './components/ShotDisplaySection';
 import { VideoSection } from './components/VideoSection';
 
-export default function Page() {
+export default function Page({ params }: { params: { id: string } }) {
   const exempt = useAdExempt();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const mutateDuel = Duel.useMutation();
@@ -73,7 +73,7 @@ export default function Page() {
 
   return (
     <PageWrapper p="0" noMaxWidth color="purple" size={1600}>
-      <HeroSection />
+      <HeroSection id={Number(params.id)} />
       <ShotDisplaySection />
       {!exempt && <AdMidSectionResponsive />}
       <CharacteristicsSection />