feat: add suspense

src/app/[lang]/category/[slug]/loading.tsx

@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/Skeleton/Skeleton"
+
+export default function Loading() {
+ return (
+ <div className="w-full">
+ <Skeleton className="min-h-[150px] w-full" />
+ </div>
+ )
+}

src/app/[lang]/category/[slug]/page.tsx

@@ -1,9 +1,11 @@
 import { Metadata } from "next/types"
 import { unstable_setRequestLocale } from "next-intl/server"
+import { Suspense } from "react"
 import { CategoryArticles } from "@/components/CategoryArticles/CategoryArticles"
 import { Locale } from "@/i18n/i18n"
 import { setTranslations } from "@/i18n/setTranslations"
 import { getMatadataObj } from "@/utils/getMetadataObj"
+import Loading from "./loading"
 
 type ArticlePageProps = { params: { slug: string; lang: Locale } }
 
@@ -15,5 +17,9 @@ export default async function Web({ params: { slug, lang } }: ArticlePageProps)
  unstable_setRequestLocale(lang)
  await setTranslations(lang)
 
- return <CategoryArticles category={slug} />
+ return (
+ <Suspense fallback={<Loading />}>
+ <CategoryArticles category={slug} />
+ </Suspense>
+ )
 }