restore banner

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

@@ -0,0 +1,7 @@
+.icon {
+  /* height="5rem" */
+}
+
+.name {
+  /* height="1em" */
+}

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

@@ -0,0 +1,27 @@
+import { memo, useRef } from "react";
+import { useIntersection } from "../../hooks/useIntersection";
+import { Flex } from "../Flex";
+import { Skeleton } from "../Skeleton";
+import styles from "./index.module.css";
+
+interface SkeletonTankCardProps {
+  onIntersection?: () => void;
+}
+
+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,
+);