Merge branch 'dev'

Author: jyn

src/app/(test)/test-error/page.tsx src/app/(test)/test-error/page.tsx.baksrc/app/(test)/test-error/page.tsx renamed to src/app/(test)/test-error/page.tsx.bak

@@ -0,0 +1,35 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import AllActivities from '@/features/activities/components/all-activities';
+import BannerCarousel from '@/features/activities/components/banner-carousel';
+import BestActivities from '@/features/activities/components/best-activities';
+import Search from '@/features/activities/components/search';
+import SearchResults from '@/features/activities/components/search-result';
+
+const ActivitiesPageContent = () => {
+  const searchParams = useSearchParams();
+  const keyword = searchParams.get('search')?.trim() || '';
+  const isSearching = keyword.trim().length > 0;
+
+  return (
+    <main className="bg-background flex w-full flex-col gap-10">
+      <div className="mx-auto w-full max-w-[120rem]">
+        <BannerCarousel />
+        <Search />
+
+        {isSearching ? (
+          <SearchResults keyword={keyword} />
+        ) : (
+          <>
+            <BestActivities />
+            <AllActivities />
+          </>
+        )}
+      </div>
+    </main>
+  );
+};
+
+export default ActivitiesPageContent;

src/app/activities/page-content.tsx

@@ -1,34 +1,15 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 
-import AllActivities from '@/features/activities/components/all-activities';
-import BannerCarousel from '@/features/activities/components/banner-carousel';
-import BestActivities from '@/features/activities/components/best-activities';
-import Search from '@/features/activities/components/search';
-import SearchResults from '@/features/activities/components/search-result';
+import ActivitiesPageContent from '@/app/activities/page-content';
+import LoadingSpinner from '@/shared/components/loading-spinner/loading-spinner';
 
 const ActivitiesPage = () => {
-  const searchParams = useSearchParams();
-  const keyword = searchParams.get('search')?.trim() || '';
-  const isSearching = keyword.trim().length > 0;
-
   return (
-    <main className="bg-background flex w-full flex-col gap-10">
-      <div className="mx-auto w-full max-w-[120rem]">
-        <BannerCarousel />
-        <Search />
-
-        {isSearching ? (
-          <SearchResults keyword={keyword} />
-        ) : (
-          <>
-            <BestActivities />
-            <AllActivities />
-          </>
-        )}
-      </div>
-    </main>
+    <Suspense fallback={<LoadingSpinner />}>
+      <ActivitiesPageContent />
+    </Suspense>
   );
 };