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>

packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx

@@ -1,10 +1,11 @@
 import { formatCompact } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
 import { Flex, Heading, Skeleton, Text } from '@radix-ui/themes';
 import { memo } from 'react';
-import { WargamingLoginButton } from '../../../../../../../../../components/Navbar/components/WargamingLoginButton';
-import { useTankVotes } from '../../../../../../../../../hooks/useTankVotes';
-import * as App from '../../../../../../../../../stores/app';
-import * as Duel from '../../../../../../../../../stores/duel';
+import { useTankVotes } from '../../../../../hooks/useTankVotes';
+import { Duel } from '../../../../../stores/duel';
+import { $wargamingLogin } from '../../../../../stores/wargamingLogin';
+import { WargamingLoginButton } from '../../../../WargamingLoginButton';
 import { StarRow } from './components/StarRow';
 import { VoteCaster } from './components/VoteCaster';
 
@@ -12,10 +13,7 @@ export const Votes = memo(
   () => {
     const id = Duel.use((state) => state.protagonist.tank.id);
     const votes = useTankVotes(id);
-    const wargaming = App.useDeferred(
-      undefined,
-      (state) => state.logins.wargaming,
-    );
+    const wargaming = useStore($wargamingLogin);
 
     return (
       <Flex direction="column" gap="3">

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

@@ -6,23 +6,22 @@ import {
 } from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
 import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons';
-import { Button, Code, Dialog, Flex } from '@radix-ui/themes';
+import { Button, Code, Dialog, Flex, Link } from '@radix-ui/themes';
 import { useState } from 'react';
-import { classIcons } from '../../../../../../../components/ClassIcon';
-import { Link } from '../../../../../../../components/Link';
-import { ScienceIcon } from '../../../../../../../components/ScienceIcon';
-import { tankToDuelMember } from '../../../../../../../core/blitzkit/tankToDuelMember';
-import * as App from '../../../../../../../stores/app';
-import * as Duel from '../../../../../../../stores/duel';
-import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
-import { TankSearch } from '../../../../components/TankSearch';
+import { tankToDuelMember } from '../../../core/blitzkit/tankToDuelMember';
+import { App } from '../../../stores/app';
+import { Duel } from '../../../stores/duel';
+import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
+import { classIcons } from '../../ClassIcon';
+import { ScienceIcon } from '../../ScienceIcon';
+import { TankSearch } from '../../TankSearch';
 import { Listing } from './components/Listing';
 
 const awaitedProvisionDefinitions = await provisionDefinitions;
 const awaitedModelDefinitions = await modelDefinitions;
 
 export function MetaSection() {
-  const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const developerMode = App.useDeferred((state) => state.developerMode, false);
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const ClassIcon = classIcons[protagonist.class];
   const antagonist = Duel.use((state) => state.antagonist.tank);