feat: skeleton and proper file extensions

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 });
-  }
-};