feat: armor modes 2

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx

@@ -1,7 +1,5 @@
 import { EyeClosedIcon, EyeOpenIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Box, Button, Checkbox, Flex, Text } from '@radix-ui/themes';
-import { useArmor } from '../../../../../../hooks/useArmor';
-import { Duel } from '../../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
 import type { ThicknessRange } from '../../../../../Armor/components/StaticArmor';
@@ -21,13 +19,10 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
   const showPrimaryArmor = TankopediaPersistent.use(
     (state) => state.showPrimaryArmor,
   );
-  const mutateDuel = Duel.useMutation();
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const editStatic = TankopediaEphemeral.use((state) => state.editStatic);
-  const protagonistTank = Duel.use((state) => state.protagonist.tank);
   const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
-  const { hasDynamicArmor } = useArmor(protagonistTank.id);
 
   return (
     <Flex

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -53,7 +53,10 @@ interface OptionsProps {
 }
 
 export function Options({ thicknessRange, canvas }: OptionsProps) {
-  const display = TankopediaPersistent.use((state) => state.display);
+  const display = TankopediaPersistent.useDeferred(
+    (state) => state.display,
+    TankopediaDisplay.Model,
+  );
   const isFullScreen = useFullScreen();
   const showGrid = TankopediaPersistent.use((state) => state.showGrid);
   const showEnvironment = TankopediaPersistent.use(

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx

@@ -45,7 +45,10 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
     const turretModelDefinition =
       tankModelDefinition.turrets[protagonist.turret.id];
     const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
-    const display = TankopediaPersistent.use((state) => state.display);
+    const display = TankopediaPersistent.useDeferred(
+      (state) => state.display,
+      TankopediaDisplay.Model,
+    );
     const onScreen = useOnScreen(canvas);
 
     useImperativeHandle(ref, () => canvas.current!, []);

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -1,6 +1,6 @@
 import { resolveNearPenetration, tankDefinitions } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { Suspense, useEffect, useMemo, useRef } from 'react';
 import { NAVBAR_HEIGHT } from '../../../constants/navbar';
 import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
@@ -18,7 +18,7 @@ export function HeroSection() {
   const isFullScreen = useFullScreen();
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const Icon = classIcons[protagonist.class];
-  const [dummyLoader, setDummyLoader] = useState(true);
+  // const [dummyLoader, setDummyLoader] = useState(true);
   const treeColor =
     protagonist.treeType === 'collector'
       ? 'blue'
@@ -46,7 +46,7 @@ export function HeroSection() {
   }, [protagonist]);
 
   useEffect(() => {
-    setDummyLoader(false);
+    // setDummyLoader(false);
   }, []);
 
   return (
@@ -109,19 +109,7 @@ export function HeroSection() {
         >
           <Box position="absolute" width="100%" height="100%">
             <Box width="100%" height="100%">
-              <TankSandboxLoader
-                id={protagonist.id}
-                display={dummyLoader ? 'flex' : 'none'}
-              />
-
-              <Suspense
-                fallback={
-                  <TankSandboxLoader
-                    id={protagonist.id}
-                    display={dummyLoader ? 'none' : 'flex'}
-                  />
-                }
-              >
+              <Suspense fallback={<TankSandboxLoader id={protagonist.id} />}>
                 <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
               </Suspense>
             </Box>