diff --git a/packages/website/src/components/Gallery/List.tsx b/packages/website/src/components/Gallery/List.tsx index d1042af2d..af3ac8292 100644 --- a/packages/website/src/components/Gallery/List.tsx +++ b/packages/website/src/components/Gallery/List.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@radix-ui/themes'; +import { Flex, Text } from '@radix-ui/themes'; import fuzzysort from 'fuzzysort'; import { times } from 'lodash-es'; import { useMemo, useState } from 'react'; @@ -14,8 +14,8 @@ export interface Avatar { id: string; } -const DEFAULT_LOADED = 25; -const PREVIEW_COUNT = 10; +const DEFAULT_LOADED = 42; +const PREVIEW_COUNT = 14; export function GalleryList({ avatars }: GalleryListProps) { const search = GalleryEphemeral.use((state) => state.search); @@ -33,21 +33,27 @@ export function GalleryList({ avatars }: GalleryListProps) { }, [search]); return ( - - {filtered.slice(0, loadedCards).map((avatar) => ( - - ))} + <> + + {filtered.length.toLocaleString()} avatars + - {times( - Math.min(PREVIEW_COUNT, filtered.length - loadedCards), - (index) => ( - setLoadedCards((state) => state + 2)} - /> - ), - )} - + + {filtered.slice(0, loadedCards).map((avatar) => ( + + ))} + + {times( + Math.min(PREVIEW_COUNT, filtered.length - loadedCards), + (index) => ( + setLoadedCards((state) => state + 2)} + /> + ), + )} + + ); }