From 4befb572a34ecf3719b1b8e8811705cebc1f2f0a Mon Sep 17 00:00:00 2001
From: achmad <anakinskywalk1@gmail.com>
Date: Sun, 31 May 2026 16:46:31 +0700
Subject: [PATCH] fix: fetch 13 articles so Latest grid shows 12 after hero
 filter; hide Load More when all articles already loaded

---
 app/[category]/page.tsx               | 2 +-
 app/page.tsx                          | 4 ++--
 components/article/LoadMoreButton.tsx | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/[category]/page.tsx b/app/[category]/page.tsx
index ff81705..93e0e3e 100644
--- a/app/[category]/page.tsx
+++ b/app/[category]/page.tsx
@@ -68,7 +68,7 @@ export default async function CategoryPage({ params }: Props) {
               <ArticleCard key={article.id} article={article} />
             ))}
           </div>
-          <LoadMoreButton categorySlug={categorySlug} initialCount={articles.length} />
+          <LoadMoreButton categorySlug={categorySlug} initialCount={articles.length} hasMore={articles.length >= 24} />
         </>
       )}
     </div>
diff --git a/app/page.tsx b/app/page.tsx
index f81d55e..83f15cc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,12 +11,12 @@ export default async function HomePage() {
   try {
     const [settings, articles] = await Promise.all([
       getSiteSettings(),
-      getArticles({ limit: 12 }),
+      getArticles({ limit: 13 }),
     ])
     heroArticle = settings.hero_article
     latestArticles = settings.hero_article
       ? articles.filter((a) => a.id !== settings.hero_article!.id)
-      : articles
+      : articles.slice(0, 12)
   } catch {
     // Directus not available yet
   }
diff --git a/components/article/LoadMoreButton.tsx b/components/article/LoadMoreButton.tsx
index 70bbb17..6fc6495 100644
--- a/components/article/LoadMoreButton.tsx
+++ b/components/article/LoadMoreButton.tsx
@@ -7,13 +7,14 @@ import ArticleCard from './ArticleCard'
 interface Props {
   categorySlug: string
   initialCount: number
+  hasMore?: boolean
 }
 
-export default function LoadMoreButton({ categorySlug, initialCount }: Props) {
+export default function LoadMoreButton({ categorySlug, initialCount, hasMore: initialHasMore = true }: Props) {
   const [articles, setArticles] = useState<Article[]>([])
   const [offset, setOffset] = useState(initialCount)
   const [loading, setLoading] = useState(false)
-  const [hasMore, setHasMore] = useState(true)
+  const [hasMore, setHasMore] = useState(initialHasMore)
 
   async function loadMore() {
     setLoading(true)