refactor: restructure UpdateArticlePage to use Suspense for loading state

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>
     );