skelton表示を追加

apps/frontend/src/routes/_app/recipe/$recipeId/.skelton-recipe.tsx

@@ -0,0 +1,70 @@
+import { IconChevronLeft } from '@tabler/icons-react'
+import { Link } from '@tanstack/react-router'
+import type { FC } from 'react'
+
+type SkeltonRecipeProps = {
+  searchResult?: string
+}
+
+export const SkeltonRecipe: FC<SkeltonRecipeProps> = ({ searchResult }) => (
+  <>
+    <div className="flex flex-col gap-y-8">
+      {searchResult !== undefined && (
+        <Link to={searchResult} className="flex items-center gap-x-2 font-bold text-accent">
+          <IconChevronLeft size={28} />
+          <span>検索結果に戻る</span>
+        </Link>
+      )}
+      <div className="flex flex-col gap-4 md:flex-row">
+        <div className="aspect-[16/9] w-full shrink-0 grow-0 animate-pulse rounded-md bg-foreground/30 object-cover md:aspect-1 md:w-32" />
+        <div className="flex shrink grow flex-col gap-y-2">
+          <div className="truncate font-bold text-xl">
+            <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/30" />
+          </div>
+          <div className="line-clamp-4">
+            {[...Array(2)].map((_, i) => (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
+                key={i}
+                className="inline-block h-[1lh] w-full animate-pulse rounded bg-foreground/30"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+    <ul className="flex flex-col gap-y-2 rounded-md bg-background-50 p-4 text-sm">
+      {[...Array(5)].map((_, i) => (
+        <li
+          // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
+          key={i}
+          className="flex justify-between border-background-100 border-b pb-2"
+        >
+          <span className="inline-block h-[1lh] w-8 animate-pulse rounded bg-foreground/30" />
+          <span className="inline-block h-[1lh] w-16 animate-pulse rounded bg-foreground/30" />
+        </li>
+      ))}
+    </ul>
+    <ol className="flex flex-col gap-y-8">
+      {[...Array(8)].map((_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
+        <li key={i} className="flex gap-x-4">
+          <div className="sticky top-[90px] flex aspect-1 h-[1lh] items-center justify-center rounded-full bg-accent font-bold text-white">
+            {i + 1}
+          </div>
+          <div className="flex grow flex-col gap-y-2">
+            <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/20" />
+            <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/20" />
+          </div>
+        </li>
+      ))}
+    </ol>
+    <div className="flex flex-col items-center gap-y-4">
+      <h2 className="w-fit font-bold text-accent text-lg">作る際のポイント</h2>
+      <div className="flex w-full flex-col gap-y-2">
+        <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/30" />
+        <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/30" />
+      </div>
+    </div>
+  </>
+)

apps/frontend/src/routes/_app/recipe/$recipeId/index.tsx

@@ -4,6 +4,7 @@ import { useLayoutEffect } from 'react'
 import { twJoin } from 'tailwind-merge'
 import { z } from 'zod'
 import { apiClient } from '../../../../lib/apiClient'
+import { SkeltonRecipe } from './.skelton-recipe'
 
 const searchParamsSchema = z.object({
   searchResult: z.string().url().optional(),
@@ -20,6 +21,7 @@ export const Route = createFileRoute('/_app/recipe/$recipeId/')({
   validateSearch: (search) => searchParamsSchema.parse(search),
   loader: ({ params }) => loader(params.recipeId),
   component: () => <RecipeInfo />,
+  pendingComponent: () => <PendingRecipe />,
 })
 
 const RecipeInfo = () => {
@@ -118,3 +120,18 @@ const RecipeInfo = () => {
     </div>
   )
 }
+
+const PendingRecipe = () => {
+  const { searchResult } = Route.useSearch()
+
+  useLayoutEffect(() => {
+    const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
+    scrollToTop()
+  }, [])
+
+  return (
+    <div className="flex flex-col gap-y-16">
+      <SkeltonRecipe searchResult={searchResult} />
+    </div>
+  )
+}

apps/frontend/src/routes/_app/recipe/.skelton-card.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react'
+
+export const SkeltonCard: FC = () => (
+  <div className="group block rounded-md transition-colors hover:bg-background-100">
+    <div className="flex h-fit gap-x-2 sm:gap-x-4">
+      <div className="aspect-1 h-20 animate-pulse rounded-md bg-foreground/30 shadow-md sm:h-32" />
+      <div className="flex shrink grow flex-col justify-center gap-y-2 overflow-hidden px-4">
+        <div className="truncate font-bold transition-colors group-hover:text-accent sm:text-lg">
+          <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/30" />
+        </div>
+        <div className="line-clamp-2 flex flex-wrap gap-2 text-sm transition-colors sm:text-base">
+          {[...Array(Math.floor(Math.random() * 3 + 4))].map((_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
+            <div key={i} className="h-[1lh] w-8 animate-pulse rounded bg-foreground/30" />
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+)

apps/frontend/src/routes/_app/recipe/index.tsx

@@ -5,6 +5,7 @@ import { z } from 'zod'
 import { LinkButton } from '../../../components/common/LinkButton'
 import { apiClient } from '../../../lib/apiClient'
 import { RecipeCard } from './.recipe-card'
+import { SkeltonCard } from './.skelton-card'
 
 const recipeSearchSchema = z.object({
   foods: z.array(z.string()).catch([]),
@@ -21,24 +22,10 @@ export const Route = createFileRoute('/_app/recipe/')({
     return data
   },
   component: () => <Recipe />,
-  pendingComponent: () => <Pending />,
-  errorComponent: () => <ErrorComponents />,
+  pendingComponent: () => <PendingRecipe />,
+  errorComponent: () => <ErrorComponent />,
 })
 
-const ErrorComponents = () => (
-  <>
-    <p>レシピが見つかりませんでした。</p>
-    <LinkButton to="/upload">戻る</LinkButton>
-  </>
-)
-
-const Pending = () => (
-  <div className="flex flex-col items-center gap-y-4 py-8">
-    <IconLoader2 size={64} className="animate-spin text-accent" />
-    <p>レシピを検索中</p>
-  </div>
-)
-
 const Recipe = () => {
   const { foods } = Route.useSearch()
   const { data, page } = Route.useLoaderData()
@@ -92,3 +79,25 @@ const Recipe = () => {
     </>
   )
 }
+
+const PendingRecipe = () => (
+  <>
+    <hgroup>
+      <h2 className="font-bold text-3xl">レシピ一覧</h2>
+      <p className="font-bold text-accent text-lg">Recipe</p>
+    </hgroup>
+    <div className="flex flex-col gap-y-8">
+      {[...Array(5)].map((_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
+        <SkeltonCard key={i} />
+      ))}
+    </div>
+  </>
+)
+
+const ErrorComponent = () => (
+  <>
+    <p>レシピが見つかりませんでした。</p>
+    <LinkButton to="/upload">戻る</LinkButton>
+  </>
+)