feat: skeleton and proper file extensions

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

@@ -1,3 +1,4 @@
+import { asset, Avatar } from '@blitzkit/core';
 import { Cross1Icon, DownloadIcon } from '@radix-ui/react-icons';
 import {
   Dialog,
@@ -9,16 +10,19 @@ import {
 } from '@radix-ui/themes';
 import { useRef } from 'react';
 import { useIntersection } from '../../hooks/useIntersection';
+import { useLocale } from '../../hooks/useLocale';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 
 type GalleryCardProps = MaybeSkeletonComponentProps<{
-  id: string;
-  name: string;
+  avatar: Avatar;
 }>;
 
 export function GalleryCard(props: GalleryCardProps) {
-  const src = `/api/gallery/${!props.skeleton && props.id}.webp`;
+  const src = asset(
+    `gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`,
+  );
   const card = useRef<HTMLDivElement>(null);
+  const { unwrap } = useLocale();
 
   useIntersection(() => props.skeleton && props.onIntersection?.(), card, {
     disabled: !props.skeleton || props.onIntersection === undefined,
@@ -50,11 +54,11 @@ export function GalleryCard(props: GalleryCardProps) {
               objectFit: 'cover',
             }}
             src={src}
-            alt={props.name}
+            alt={unwrap(props.avatar.name)}
           />
 
           <Text size="1" align="center" style={{ maxWidth: '100%' }}>
-            {props.name}
+            {unwrap(props.avatar.name)}
           </Text>
         </>
       )}
@@ -86,12 +90,12 @@ export function GalleryCard(props: GalleryCardProps) {
         </Flex>
 
         <Flex px="4" justify="center" mt="3">
-          <img src={src} alt={props.name} />
+          <img src={src} alt={unwrap(props.avatar.name)} />
         </Flex>
 
         <Flex justify="center" mt="4">
           <Dialog.Title align="center" style={{ maxWidth: '10rem' }}>
-            {props.name}
+            {unwrap(props.avatar.name)}
           </Dialog.Title>
         </Flex>
       </Dialog.Content>

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

@@ -7,12 +7,10 @@ import { useMemo, useState } from 'react';
 import { awaitableGallery } from '../../core/awaitables/gallery';
 import { useLocale } from '../../hooks/useLocale';
 import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+import { InlineSkeleton } from '../InlineSkeleton';
 import { GalleryCard } from './Card';
 
-interface GalleryListProps {
-  avatars: Avatar[];
-}
-
 export interface Avatar {
   name: string;
   id: string;
@@ -23,7 +21,7 @@ const gallery = await awaitableGallery;
 const DEFAULT_LOADED = 42;
 const PREVIEW_COUNT = 28;
 
-export function GalleryList() {
+export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) {
   const search = GalleryEphemeral.use((state) => state.search);
   const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED);
   const { locale, strings, unwrap } = useLocale();
@@ -49,22 +47,25 @@ export function GalleryList() {
   return (
     <>
       <Text align="center" color="gray">
-        {literals(strings.website.tools.gallery.search.results, [
-          filtered.length.toLocaleString(locale),
-        ])}
+        {skeleton ? (
+          <InlineSkeleton width="7rem" />
+        ) : (
+          literals(strings.website.tools.gallery.search.results, [
+            filtered.length.toLocaleString(locale),
+          ])
+        )}
       </Text>
 
       <Flex wrap="wrap" gap="4" justify="center">
-        {filtered.slice(0, loadedCards).map((avatar) => (
-          <GalleryCard
-            key={avatar.id}
-            id={avatar.id}
-            name={unwrap(avatar.name)}
-          />
-        ))}
+        {!skeleton &&
+          filtered
+            .slice(0, loadedCards)
+            .map((avatar) => <GalleryCard key={avatar.id} avatar={avatar} />)}
 
         {times(
-          Math.min(PREVIEW_COUNT, filtered.length - loadedCards),
+          skeleton
+            ? DEFAULT_LOADED + PREVIEW_COUNT
+            : Math.min(PREVIEW_COUNT, filtered.length - loadedCards),
           (index) => (
             <GalleryCard
               key={index}

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

@@ -3,14 +3,16 @@ import { TextField } from '@radix-ui/themes';
 import { useRef } from 'react';
 import { useLocale } from '../../hooks/useLocale';
 import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 
-export function GallerySearch() {
+export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) {
   const input = useRef<HTMLInputElement>(null);
   const mutateGalleryEphemeral = GalleryEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
     <TextField.Root
+      disabled={skeleton}
       placeholder={strings.website.tools.gallery.search.hint}
       ref={input}
       onChange={(event) => {