From 4122ff5bf1b7566e7d4b6b7c3040760d4710944b Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:45:59 -0600
Subject: [PATCH] fix: suspense armor laoder

---
 .../Tankopedia/HeroSection/components/Options/index.tsx     | 6 ++++--
 packages/website/src/hooks/useArmor.ts                      | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
index 72d0e86a6..20dad8563 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
@@ -27,7 +27,7 @@ import {
   Text,
   Tooltip,
 } from '@radix-ui/themes';
-import { useState, type RefObject } from 'react';
+import { Suspense, useState, type RefObject } from 'react';
 import { ENVIRONMENTS } from '../../../../../constants/lightingEnvironments';
 import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../hooks/useEquipment';
@@ -310,7 +310,9 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
             </IconButton>
           </Flex>
 
-          <DynamicArmorSwitcher />
+          <Suspense>
+            <DynamicArmorSwitcher />
+          </Suspense>
         </Flex>
       )}
 
diff --git a/packages/website/src/hooks/useArmor.ts b/packages/website/src/hooks/useArmor.ts
index b68907e8e..e1a5f05a6 100644
--- a/packages/website/src/hooks/useArmor.ts
+++ b/packages/website/src/hooks/useArmor.ts
@@ -9,6 +9,7 @@ const cache: Record<
 
 export function useArmor(id: number) {
   const gltf = useLoader(GLTFLoader, asset(`3d/tanks/armor/${id}.glb`));
+
   if (!cache[id]) {
     cache[id] = {
       gltf,