fix: canvases

packages/website/src/components/PWA.astro

@@ -18,6 +18,10 @@ import { pwaInfo } from "virtual:pwa-info";
     onOfflineReady() {
       console.log("PWA offline ready");
     },
+
+    onNeedRefresh() {
+      document.documentElement.classList.add("pwa-refresh");
+    },
   });
 
   pwaInstallHandler.addListener((canInstall) => {

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

@@ -5,6 +5,7 @@ import { useRef, useState } from "react";
 import { Color, SpotLight, SpotLightHelper } from "three";
 import { degToRad } from "three/src/math/MathUtils.js";
 import { isHalloween } from "../../../../../../core/blitzkit/isHalloween";
+import { Tankopedia } from "../../../../../../stores/tankopedia";
 import { HelpingSpotLight } from "../../../../../HelpingSpotLight";
 
 const LIGHTS_COUNT = 5;
@@ -18,6 +19,7 @@ const TARGET_FRAME_RATE = 30;
 
 export function Lighting() {
   const [cast, setCast] = useState(true);
+  const revealed = Tankopedia.use((state) => state.revealed);
 
   const topLight = useRef<SpotLight>(null!);
   const frontLight = useRef<SpotLight>(null!);
@@ -29,7 +31,7 @@ export function Lighting() {
   const samples = useRef<number[]>([]);
 
   useFrame(({ clock }) => {
-    if (!cast) return;
+    if (!cast || !revealed) return;
 
     const dt = clock.elapsedTime - last.current;
     last.current = clock.elapsedTime;

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

@@ -140,7 +140,9 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
                 }}
               >
                 <Suspense>
-                  <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                  {!skeleton && (
+                    <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                  )}
                 </Suspense>
               </Box>
             </Box>