skidding

components/site/OutfitQuickChooser.tsx

@@ -7,6 +7,7 @@ import LazyLoadedImage from "../util/LazyLoadedImage";
 import { StupidHoverThing } from "../util/MiscStuff";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { useEffect } from "react";
 
 type OutfitSelectorProps = {
 	setVisible: (visible: boolean) => void;
@@ -23,6 +24,18 @@ export function OutfitSelector({
 	const outfits = useAvatarOutfits();
 	const acc = useCurrentAccount();
 
+	useEffect(() => {
+		if (!outfits) return;
+		loadThumbnails(
+			outfits.map((a) => ({
+				type: "Outfit",
+				targetId: a.id,
+				format: "webp",
+				size: "420x420"
+			}))
+		).catch(() => {});
+	}, [acc, outfits]);
+
 	if (!outfits || !acc) return null;
 
 	return (
@@ -35,22 +48,22 @@ export function OutfitSelector({
 			/>
 			<div className="z-20 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 p-8 bg-crust/90 rounded-xl">
 				{(outfits || []).map((outfit: { id: number; name: string }) => (
-					<button
-						key={outfit.id}
-						className="hover:bg-base/50 rounded-lg"
-						onClick={async () => {
-							updateOutfit(outfit, acc);
-							setVisible(false);
-						}}
-					>
-						<StupidHoverThing delayDuration={0} text={outfit.name}>
+					<StupidHoverThing key={outfit.id} delayDuration={0} text={outfit.name}>
+						<button
+							key={outfit.id}
+							className="hover:bg-base/50 rounded-lg"
+							onClick={async () => {
+								updateOutfit(outfit, acc);
+								setVisible(false);
+							}}
+						>
 							<LazyLoadedImage
 								imgId={`Outfit_${outfit.id}`}
 								alt={outfit.name}
 								className="w-32 h-32 rounded-md"
 							/>
-						</StupidHoverThing>
-					</button>
+						</button>
+					</StupidHoverThing>
 				))}
 			</div>
 		</div>