feat: skeleton search

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

@@ -6,14 +6,18 @@ import {
 } from '../../../../hooks/useLocale';
 import { App } from '../../../../stores/app';
 import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
+import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
 
-export function Page({ locale }: LocaleAcceptorProps) {
+export function Page({
+  locale,
+  skeleton,
+}: LocaleAcceptorProps & MaybeSkeletonComponentProps) {
   return (
     <LocaleProvider locale={locale}>
       <PageWrapper color="purple" maxWidth="80rem">
         <TankopediaPersistent.Provider>
           <App.Provider>
-            <TankSearch />
+            <TankSearch skeleton={skeleton} />
           </App.Provider>
         </TankopediaPersistent.Provider>
       </PageWrapper>

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

@@ -10,6 +10,6 @@ const { locale } = Astro.params;
 
 <ToolLayout tool={tankopediaTool}>
   <Page {locale} client:only="react">
-    <Page {locale} slot="fallback" />
+    <Page {locale} skeleton slot="fallback" />
   </Page>
 </ToolLayout>