From 4e61e4bff5c46fdd9f097e9678b56b6a28955a15 Mon Sep 17 00:00:00 2001
From: Vitor Hideyoshi <vitor.h.n.batista@gmail.com>
Date: Thu, 16 Apr 2026 19:26:23 -0300
Subject: [PATCH] refactor: restructure UpdateArticlePage to use Suspense for
 loading state

---
 .../(pages)/admin/article/[externalId]/page.tsx  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/(pages)/admin/article/[externalId]/page.tsx b/src/app/(pages)/admin/article/[externalId]/page.tsx
index 2d32d0e..f88eff4 100644
--- a/src/app/(pages)/admin/article/[externalId]/page.tsx
+++ b/src/app/(pages)/admin/article/[externalId]/page.tsx
@@ -4,20 +4,28 @@ import { UUIDv4 } from '@/utils/types/uuid';
 import { ArrowLeftIcon } from 'lucide-react';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
 
 interface UpdateArticlePageProps {
     params: Promise<{ externalId: string }>;
 }
 
-const UpdateArticlePage = async ({ params }: UpdateArticlePageProps) => {
+const ArticleFormContent = async ({
+    params,
+}: {
+    params: Promise<{ externalId: string }>;
+}) => {
     const { externalId } = await params;
-
     const result = await getArticleByExternalId(externalId as UUIDv4);
     if (!result.ok) throw result.error;
 
     const article = result.value;
     if (!article) notFound();
 
+    return <UpdateArticleForm article={article} />;
+};
+
+const UpdateArticlePage = ({ params }: UpdateArticlePageProps) => {
     return (
         <div className='container mx-auto px-4 py-10 min-h-3/4'>
             <div className='mb-6'>
@@ -31,7 +39,9 @@ const UpdateArticlePage = async ({ params }: UpdateArticlePageProps) => {
             </div>
             <div className='rounded-lg border border-border p-6'>
                 <h2 className='mb-6 text-2xl font-bold'>Edit Article</h2>
-                <UpdateArticleForm article={article} />
+                <Suspense fallback={<div>Loading...</div>}>
+                    <ArticleFormContent params={params} />
+                </Suspense>
             </div>
         </div>
     );