#61

frontend/src/pages/posts/PostListPage.tsx

@@ -14,7 +14,7 @@ import type { Post, Tag, WikiPage } from '@/types'
 
 
 export default () => {
-  const [posts, setPosts] = useState<Post[]> ([])
+  const [posts, setPosts] = useState<Post[] | null> (null)
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const location = useLocation ()
@@ -30,7 +30,7 @@ export default () => {
           .then (res => setPosts (toCamel (res.data, { deep: true })))
           .catch (err => {
             console.error ('Failed to fetch posts:', err)
-            setPosts ([])
+            setPosts (null)
           }))
 
     setWikiPage (null)
@@ -53,25 +53,26 @@ export default () => {
              : `${ SITE_TITLE }　〜 ぼざクリも、ぼざろ外も、外伝もあるんだよ`}
           </title>
         </Helmet>
-        <TagSidebar posts={posts} />
+        <TagSidebar posts={posts || []} />
         <MainArea>
           <TabGroup key={wikiPage}>
             <Tab name="広場">
-              {posts.length
-               ? (
-                  <div className="flex flex-wrap gap-4 p-4">
-                    {posts.map (post => (
-                        <Link to={`/posts/${ post.id }`}
-                              key={post.id}
-                              className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
-                          <img src={post.thumbnail ?? post.thumbnailBase}
-                               className="object-none w-full h-full" />
-                        </Link>))}
-                  </div>)
-               : '広場には何もありませんよ．'}
+              {posts == null ? 'Loading...' : (
+                  posts.length
+                  ? (
+                     <div className="flex flex-wrap gap-4 p-4">
+                       {posts.map (post => (
+                           <Link to={`/posts/${ post.id }`}
+                                 key={post.id}
+                                 className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
+                             <img src={post.thumbnail ?? post.thumbnailBase}
+                                  className="object-none w-full h-full" />
+                           </Link>))}
+                     </div>)
+                  : '広場には何もありませんよ．')}
             </Tab>
             {(wikiPage && wikiPage.body) && (
-                <Tab name="Wiki" init={!(posts.length)}>
+                <Tab name="Wiki" init={!(posts?.length)}>
                   <WikiBody body={wikiPage.body} />
                   <div className="my-2">
                     <Link to={`/wiki/${ wikiPage.title }`}>Wiki を見る</Link>