fix: faster search

packages/website/src/components/Gallery/Card.tsx

@@ -0,0 +1,46 @@
+import { Flex, Skeleton, Text } from '@radix-ui/themes';
+import { useRef } from 'react';
+import { useIntersection } from '../../hooks/useIntersection';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+
+type GalleryCardProps = MaybeSkeletonComponentProps<{
+  id: string;
+  name: string;
+}>;
+
+export function GalleryCard(props: GalleryCardProps) {
+  const card = useRef<HTMLDivElement>(null);
+
+  useIntersection(() => props.skeleton && props.onIntersection?.(), card, {
+    disabled: !props.skeleton || props.onIntersection === undefined,
+  });
+
+  return (
+    <Flex direction="column" align="center" width="6rem" gap="1" ref={card}>
+      {props.skeleton && (
+        <>
+          <Skeleton width="100%" height="4.57rem" />
+          <Skeleton width="100%" height="1em" />
+        </>
+      )}
+
+      {!props.skeleton && (
+        <>
+          <img
+            style={{
+              width: '4rem',
+              height: '4.57rem',
+              // aspect ratio 7 / 8
+              objectFit: 'cover',
+            }}
+            src={`/api/gallery/${props.id}.webp`}
+          />
+
+          <Text align="center" style={{ maxWidth: '100%' }}>
+            {props.name}
+          </Text>
+        </>
+      )}
+    </Flex>
+  );
+}

packages/website/src/components/Gallery/List.tsx

@@ -1,7 +1,9 @@
-import { Flex, Text } from '@radix-ui/themes';
+import { Flex } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
-import { useMemo } from 'react';
+import { times } from 'lodash-es';
+import { useMemo, useState } from 'react';
 import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+import { GalleryCard } from './Card';
 
 interface GalleryListProps {
   avatars: Avatar[];
@@ -12,9 +14,15 @@ export interface Avatar {
   id: string;
 }
 
+const DEFAULT_LOADED = 25;
+const PREVIEW_COUNT = 10;
+
 export function GalleryList({ avatars }: GalleryListProps) {
   const search = GalleryEphemeral.use((state) => state.search);
+  const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED);
   const filtered = useMemo(() => {
+    setLoadedCards(DEFAULT_LOADED);
+
     if (search === undefined) {
       return avatars;
     } else {
@@ -26,23 +34,20 @@ export function GalleryList({ avatars }: GalleryListProps) {
 
   return (
     <Flex wrap="wrap" gap="4">
-      {filtered.map((avatar) => {
+      {filtered.slice(0, loadedCards).map((avatar) => (
-        return (
+        <GalleryCard key={avatar.id} id={avatar.id} name={avatar.name} />
-          <Flex key={avatar.id} direction="column" align="center" width="6rem">
+      ))}
-            <img
+
-              style={{
+      {times(
-                width: '4rem',
+        Math.min(PREVIEW_COUNT, filtered.length - loadedCards),
-                aspectRatio: '7 / 8',
+        (index) => (
-                objectFit: 'cover',
+          <GalleryCard
-              }}
+            key={index}
-              src={`/api/gallery/${avatar.id}.webp`}
+            skeleton
-            />
+            onIntersection={() => setLoadedCards((state) => state + 2)}
-            <Text align="center" style={{ maxWidth: '100%' }}>
+          />
-              {avatar.name}
+        ),
-            </Text>
+      )}
-          </Flex>
-        );
-      })}
     </Flex>
   );
 }

packages/website/src/types/maybeSkeletonComponentProps.ts

@@ -1,3 +1,8 @@
-export interface MaybeSkeletonComponentProps {
+export type MaybeSkeletonComponentProps<T = {}> =
-  skeleton?: boolean;
+  | {
-}
+      skeleton: true;
+      onIntersection?: () => void;
+    }
+  | (T & {
+      skeleton?: false;
+    });