some cleanup

packages/website/src/components/TankCardSkeleton/index.module.css

@@ -1,7 +1,43 @@
-.icon {
-  /* height="5rem" */
-}
+.wrapper {
+  --image-height: 6rem;
 
-.name {
-  /* height="1em" */
+  &[data-compact="true"] {
+    --image-height: 4rem;
+
+    .image-wrapper {
+      background-size: auto 75%;
+    }
+  }
+
+  .image-wrapper {
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+
+    height: var(--image-height);
+  }
+
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: var(--space-2);
+
+    .icon {
+      width: 1em;
+      height: 1em;
+      min-width: 1em;
+      min-height: 1em;
+    }
+
+    .text {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }

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

@@ -1,27 +1,17 @@
-import { memo, useRef } from "react";
-import { useIntersection } from "../../hooks/useIntersection";
 import { Flex } from "../Flex";
+import { InlineSkeleton } from "../InlineSkeleton";
 import { Skeleton } from "../Skeleton";
 import styles from "./index.module.css";
 
-interface SkeletonTankCardProps {
-  onIntersection?: () => void;
-}
+type TankCardProps = {
+  compact?: boolean;
+};
 
-export const TankCardSkeleton = memo(
-  ({ onIntersection }: SkeletonTankCardProps) => {
-    const card = useRef<HTMLDivElement>(null!);
-
-    useIntersection(() => onIntersection?.(), card, {
-      disabled: onIntersection === undefined,
-    });
-
-    return (
-      <Flex column gap="2" ref={card}>
-        <Skeleton className={styles.icon} />
-        <Skeleton className={styles.name} />
-      </Flex>
-    );
-  },
-  () => true,
-);
+export const TankCardSkeleton = ({ compact }: TankCardProps) => {
+  return (
+    <Flex className={styles.wrapper} data-compact={compact} column gap="3">
+      <Skeleton className={styles["image-wrapper"]} />
+      <InlineSkeleton className={styles.name} />
+    </Flex>
+  );
+};