feat: refactor article components to use searchParams for pagination and improve content loading

src/app/(pages)/home/page.tsx

@@ -37,11 +37,14 @@ const ArticleListSkeleton = () => (
 );
 
 interface ArticleListProps {
-    page: number;
-    pageSize: number;
+    searchParams: Promise<{ page?: string; pageSize?: string }>;
 }
 
-const ArticleList = async ({ page, pageSize }: ArticleListProps) => {
+const ArticleList = async ({ searchParams }: ArticleListProps) => {
+    const { page: pageParam, pageSize: pageSizeParam } = await searchParams;
+    const page = Math.max(1, Number(pageParam) || 1);
+    const pageSize = Number(pageSizeParam) || PAGE_SIZE;
+
     const {
         data: articles,
         totalPages,
@@ -94,10 +97,6 @@ type HomeProps = {
 };
 
 const Home = async ({ searchParams }: HomeProps) => {
-    const { page: pageParam, pageSize: pageSizeParam } = await searchParams;
-    const page = Math.max(1, Number(pageParam) || 1);
-    const pageSize = Number(pageSizeParam) || PAGE_SIZE;
-
     return (
         <div className='container mx-auto w-full flex-1 px-4 py-12 md:py-16'>
             <div className='mb-10 border-b border-border pb-8'>
@@ -109,7 +108,7 @@ const Home = async ({ searchParams }: HomeProps) => {
                 </h1>
             </div>
             <Suspense fallback={<ArticleListSkeleton />}>
-                <ArticleList page={page} pageSize={pageSize} />
+                <ArticleList searchParams={searchParams} />
             </Suspense>
         </div>
     );