some cleanup

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

@@ -4,9 +4,11 @@ import { type ReactNode } from "react";
 import { api } from "../../core/blitzkit/api";
 import { useLocale } from "../../hooks/useLocale";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { classIcons } from "../ClassIcon";
 import { Flex } from "../Flex";
 import { LinkI18nWrapper } from "../LinkI18nWrapper";
+import { TankCardSkeleton } from "../TankCardSkeleton";
 import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
 import { Text, type TextProps } from "../Text";
 import styles from "./index.module.css";
@@ -21,38 +23,36 @@ type TankCardProps = {
 
 const tankDefinitions = await api.tankDefinitions();
 
-export const TankCard = ({
-  tank,
-  discriminator,
-  onTankSelect: onSelect,
-  noLink,
-  compact,
-}: TankCardProps) => {
+export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
+  if (props.skeleton) {
+    return <TankCardSkeleton />;
+  }
+
   const { unwrap, locale } = useLocale();
 
-  const provideLink = !noLink && onSelect === undefined;
-  const name = unwrap(tank.name!);
+  const provideLink = !props.noLink && props.onTankSelect === undefined;
+  const name = unwrap(props.tank.name!);
 
   const color: TextProps["color"] =
-    tank.type === TankType.TANK_TYPE_COLLECTOR
+    props.tank.type === TankType.TANK_TYPE_COLLECTOR
       ? "blue"
-      : tank.type === TankType.TANK_TYPE_PREMIUM
+      : props.tank.type === TankType.TANK_TYPE_PREMIUM
         ? "amber"
         : "gray";
-  const lowContrast = tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
+  const lowContrast = props.tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
 
-  const Icon = classIcons[tank.class];
+  const Icon = classIcons[props.tank.class];
 
   const content = (
     <Flex
       className={styles.wrapper}
-      data-compact={compact}
+      data-compact={props.compact}
       column
       gap="3"
       onClick={() => {
-        onSelect?.(tank);
+        props.onTankSelect?.(props.tank);
         TankopediaPersistent.mutate((draft) => {
-          draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
+          draft.recentlyViewed = uniq([props.tank.id, ...draft.recentlyViewed])
             .filter((id) => id in tankDefinitions.tanks)
             .slice(0, MAX_RECENTLY_VIEWED);
         });
@@ -64,13 +64,13 @@ export const TankCard = ({
         style={{
           backgroundImage: `url(${alias(
             "api",
-            `/flags/scratched/${tank.nation}.webp`,
+            `/flags/scratched/${props.tank.nation}.webp`,
           )})`,
         }}
       >
         <img
           alt={name}
-          src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
+          src={alias("api", `/tanks/${props.tank.id}/icons/big.webp`)}
         />
       </Flex>
 
@@ -79,9 +79,9 @@ export const TankCard = ({
         <span className={styles.text}>{name}</span>
       </Text>
 
-      {discriminator && (
+      {props.discriminator && (
         <Text lowContrast align="center">
-          {discriminator}
+          {props.discriminator}
         </Text>
       )}
     </Flex>
@@ -89,7 +89,7 @@ export const TankCard = ({
 
   if (provideLink) {
     return (
-      <LinkI18nWrapper locale={locale} href={`/tanks/${tank.slug}`}>
+      <LinkI18nWrapper locale={locale} href={`/tanks/${props.tank.slug}`}>
         {content}
       </LinkI18nWrapper>
     );