Merge pull request #235 from maretol/development

Development
maretol · Jan 3, 2025 · b49e81e · b49e81e
2 parents cc7f4c9 + 5d0036b
commit b49e81e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/pages/components/middle/article_content.tsx b/pages/components/middle/article_content.tsx
@@ -17,6 +17,7 @@ import Table from './article_dom/table_of_contents'
 import ArtifactCard from './article_dom/artifactcard'
 import AmazonArea from './article_dom/amazon'
 import ComicPageCard from './article_dom/comiccard'
+import LoadingComicCard from './loading_dom/loading_comiccard'
 
 export default async function ArticleContent({
   contents,
@@ -154,7 +155,7 @@ export default async function ArticleContent({
             // 漫画ページへのリンク
             return (
               <div key={i} className="py-6">
-                <Suspense fallback={<div>loading comic</div>}>
+                <Suspense fallback={<LoadingComicCard />}>
                   <ComicPageCard link={text} />
                 </Suspense>
               </div>

diff --git a/pages/components/middle/loading_dom/loading_comiccard.tsx b/pages/components/middle/loading_dom/loading_comiccard.tsx
@@ -0,0 +1,25 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function LoadingComicCard() {
+  return (
+    <div className="max-w-xl border-2 bg-gray-300 rounded-md">
+      <div className="w-full flex flex-row space-x-4 m-2 ml-4">
+        <Skeleton className="w-36 h-52" />
+        <div className="space-y-6">
+          <div>
+            <Skeleton className="mx-3 w-80 h-6 my-2" />
+            <Skeleton className="mx-3 w-48 h-4 my-2" />
+            <Skeleton className="mx-3 w-48 h-4 my-2" />
+          </div>
+          <div>
+            <Skeleton className="mx-3 w-48 h-4 my-2" />
+            <Skeleton className="mx-3 w-48 h-4 my-2" />
+          </div>
+          <div>
+            <Skeleton className="mx-3 w-80 h-4 my-2" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}