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) => {

packages/website/src/pages/[...locale]/tools/gallery/_index.tsx

@@ -1,16 +1,17 @@
 import { GalleryList } from '../../../../components/Gallery/List';
 import { GallerySearch } from '../../../../components/Gallery/Search';
 import { PageWrapper } from '../../../../components/PageWrapper';
-import { awaitableGallery } from '../../../../core/awaitables/gallery';
 import {
   LocaleProvider,
-  useLocale,
   type LocaleAcceptorProps,
 } from '../../../../hooks/useLocale';
 import { GalleryEphemeral } from '../../../../stores/galleryEphemeral';
+import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
 
-
-export function Page({ locale, ...props }: LocaleAcceptorProps) {
+export function Page({
+  locale,
+  ...props
+}: LocaleAcceptorProps & MaybeSkeletonComponentProps) {
   return (
     <LocaleProvider locale={locale}>
       <Content {...props} />
@@ -18,13 +19,12 @@ export function Page({ locale, ...props }: LocaleAcceptorProps) {
   );
 }
 
-function Content() {
-
+function Content({ skeleton }: MaybeSkeletonComponentProps) {
   return (
     <PageWrapper maxWidth="80rem" color="gold">
       <GalleryEphemeral.Provider>
-        <GallerySearch />
-        <GalleryList   />
+        <GallerySearch skeleton={skeleton} />
+        <GalleryList skeleton={skeleton} />
       </GalleryEphemeral.Provider>
     </PageWrapper>
   );

packages/website/src/pages/[...locale]/tools/gallery/index.astro

@@ -1,8 +1,6 @@
 ---
-import type { Avatar } from '../../../../components/Gallery/List';
 import { galleryTool } from '../../../../constants/tools';
-import { awaitableGallery } from '../../../../core/awaitables/gallery';
- import ToolLayout from '../../../../layouts/ToolLayout.astro';
+import ToolLayout from '../../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 
 export { getStaticPaths } from '../../index.astro';
@@ -11,5 +9,7 @@ const { locale } = Astro.params;
 ---
 
 <ToolLayout tool={galleryTool}>
-  <Page {locale}  client:load />
+  <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
+  </Page>
 </ToolLayout>

packages/website/src/pages/api/gallery/[avatar].webp.ts

@@ -1,28 +0,0 @@
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import type { APIRoute, GetStaticPaths } from 'astro';
-import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
-
-export const getStaticPaths = (async () => {
-  const glossary = await fetchGlossary(DEFAULT_LOCALE);
-  const avatarKeys = Object.keys(glossary)
-    .filter((key) => key.startsWith('avatar_'))
-    .map((key) => key.replace('avatar_', ''));
-
-  return avatarKeys.map((avatar) => ({ params: { avatar } }));
-}) satisfies GetStaticPaths;
-
-const glossary = await fetchGlossary(DEFAULT_LOCALE);
-
-export const GET: APIRoute<{}, { avatar: string }> = async ({ params }) => {
-  const image =
-    glossary[`avatar_${params.avatar}`].image_url ??
-    'https://i.imgur.com/uXBiK05.jpeg';
-
-  if (import.meta.env.MODE === 'development') {
-    return Response.redirect(image);
-  } else {
-    const response = await fetch(image);
-    const blob = await response.blob();
-    return new Response(blob, { headers: response.headers });
-  }
-};