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)}
+ />
+ ),
+ )}
+
+ >
);
}