skeleton

src/app/products/page.tsx

@@ -1,14 +1,26 @@
 import { NextPage } from 'next'
+import { Suspense } from 'react'
 import { HydrationBoundary } from '@tanstack/react-query'
 import { dehydrate } from '@tanstack/react-query'
 import { QueryClient } from '@tanstack/react-query'
 import { categoriesQueryOptions, danakServiceSuggestedQueryOptions, servicesQueryOptions } from './hooks/useProductData'
 import Products from './ProductsPage'
-const ProductsPage: NextPage = async () => {
+import Loading from './loading'
+
+const ProductsPage: NextPage = () => {
+    return (
+        <Suspense fallback={<Loading />}>
+            <ProductsContent />
+        </Suspense>
+    )
+}
+
+async function ProductsContent() {
     const queryClient = new QueryClient()
     await queryClient.prefetchQuery(servicesQueryOptions)
     await queryClient.prefetchQuery(categoriesQueryOptions)
     await queryClient.prefetchQuery(danakServiceSuggestedQueryOptions)
+
     return (
         <HydrationBoundary state={dehydrate(queryClient)}>
             <Products />