loader

packages/website/src/components/TankSandboxLoader/index.module.css

@@ -0,0 +1,44 @@
+.loader {
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-5);
+
+  opacity: 1;
+  filter: blur(0);
+
+  transition: var(--duration-subtle);
+
+  &[data-visible="false"] {
+    opacity: 0;
+    pointer-events: none;
+
+    filter: blur(4rem);
+  }
+
+  .icon {
+    height: 25%;
+  }
+
+  .progress {
+    height: var(--space-2);
+    width: 100%;
+
+    background-color: var(--gray-3);
+
+    border-radius: calc(var(--space-2) / 2);
+    overflow: hidden;
+
+    .bar {
+      height: 100%;
+      background-color: var(--accent-9);
+    }
+  }
+}

packages/website/src/components/TankSandboxLoader/index.tsx

@@ -0,0 +1,35 @@
+import { alias } from "@blitzkit/core";
+import { useProgress } from "@react-three/drei";
+import { Tankopedia } from "../../stores/tankopedia";
+import styles from "./index.module.css";
+
+export function TankSandboxLoader() {
+  const tank = Tankopedia.use((state) => state.protagonist.tank);
+  const revealed = Tankopedia.use((state) => state.revealed);
+
+  const data = useProgress();
+
+  const isVisible = !revealed;
+
+  return (
+    <div className={styles.loader} data-visible={isVisible}>
+      <img
+        className={styles.icon}
+        src={alias("api", `/tanks/${tank}/icons/big.webp`)}
+      />
+      <Progress value={data.progress} />
+    </div>
+  );
+}
+
+interface ProgressProps {
+  value: number;
+}
+
+function Progress({ value }: ProgressProps) {
+  return (
+    <div className={styles.progress}>
+      <div className={styles.bar} style={{ width: `${value}%` }} />
+    </div>
+  );
+}

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

@@ -1,25 +0,0 @@
-import { alias } from "@blitzkit/core";
-import { Flex, type FlexProps, Progress } from "@radix-ui/themes";
-import { useProgress } from "@react-three/drei";
-
-type TankSandboxLoaderProps = Omit<FlexProps, "id"> & {
-  id: number;
-};
-
-export function TankSandboxLoader({ id, ...props }: TankSandboxLoaderProps) {
-  const data = useProgress();
-
-  return (
-    <Flex width="100%" height="100%" align="center" justify="center" {...props}>
-      <img
-        src={alias("api", `/tanks/${id}/icons/big.webp`)}
-        style={{ height: "75%", filter: "blur(1rem)" }}
-      />
-      <Progress
-        size="3"
-        value={data.progress}
-        style={{ position: "absolute", width: "16rem", maxWidth: "50vw" }}
-      />
-    </Flex>
-  );
-}

packages/website/src/components/TankopediaSandbox/index.tsx

@@ -24,6 +24,7 @@ import { StaticArmor, type ThicknessRange } from "../StaticArmor";
 import { TankModel } from "../TankModel";
 import { TankopediaAntagonistControl } from "../TankopediaAntagonistControl";
 import { TankopediaSkinSwitcher } from "../TankopediaSkinSwitcher";
+import { TankSandboxLoader } from "../TankSandboxLoader";
 import styles from "./index.module.css";
 
 type TankSandboxProps = MaybeSkeletonComponentProps & {
@@ -172,6 +173,7 @@ export function TankopediaSandbox({
         {!skeleton && <Content thicknessRange={thicknessRange} />}
       </SmartCanvas>
 
+      <TankSandboxLoader />
       <TankopediaSkinSwitcher />
       <TankopediaAntagonistControl
         antagonistCharacteristics={antagonistCharacteristics}