cart item

src/app/compare/page.tsx

@@ -5,7 +5,7 @@ import Layout from '@/hoc/Layout'
 import { NextPage } from 'next'
 import Image from 'next/image'
 import { useSearchParams } from 'next/navigation'
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Suspense } from 'react';
 import { useGetCompare, useSearchCompareProduct } from './hooks/useCompareData'
 import { useLocalCart } from '@/app/product/hooks/useLocalCart'
 import { toast } from '@/components/Toast'
@@ -13,7 +13,7 @@ import { CompareProduct } from './types/Types'
 import { useSharedStore } from '@/share/store/sharedStore'
 import DefaulModal from '@/components/DefaulModal'
 
-const ComparePage: NextPage = () => {
+const ComparePageContent: NextPage = () => {
 
     const [productIds, setProductIds] = useState<string[]>([]);
     const [isCompareModalOpen, setIsCompareModalOpen] = useState(false);
@@ -282,4 +282,23 @@ const ComparePage: NextPage = () => {
     )
 }
 
+const ComparePage: NextPage = () => {
+    return (
+        <Suspense fallback={
+            <Layout>
+                <div className='mt-24 px-20'>
+                    <div className='flex justify-center items-center min-h-[400px]'>
+                        <div className='text-center'>
+                            <div className='animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto'></div>
+                            <p className='mt-4 text-gray-600'>در حال بارگذاری...</p>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        }>
+            <ComparePageContent />
+        </Suspense>
+    )
+}
+
 export default ComparePage