From 6e35c06cfc0401f6b295af3f378e59e8a7526c70 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 29 Oct 2026 11:54:33 -0500
Subject: [PATCH] loader

---
 .../TankSandboxLoader/index.module.css        | 44 +++++++++++++++++++
 .../components/TankSandboxLoader/index.tsx    | 35 +++++++++++++++
 .../components/TankSandboxLoader.tsx          | 25 -----------
 .../components/TankopediaSandbox/index.tsx    |  2 +
 4 files changed, 81 insertions(+), 25 deletions(-)
 create mode 100644 packages/website/src/components/TankSandboxLoader/index.module.css
 create mode 100644 packages/website/src/components/TankSandboxLoader/index.tsx
 delete mode 100644 packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx

diff --git a/packages/website/src/components/TankSandboxLoader/index.module.css b/packages/website/src/components/TankSandboxLoader/index.module.css
new file mode 100644
index 000000000..83b1f80b9
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/packages/website/src/components/TankSandboxLoader/index.tsx b/packages/website/src/components/TankSandboxLoader/index.tsx
new file mode 100644
index 000000000..81b485d82
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx
deleted file mode 100644
index 015b7d095..000000000
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/packages/website/src/components/TankopediaSandbox/index.tsx b/packages/website/src/components/TankopediaSandbox/index.tsx
index 4e95bfa93..451afef2d 100644
--- a/packages/website/src/components/TankopediaSandbox/index.tsx
+++ b/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}