From 73541b668a267cc2d5b83bb2734613b9dc31a6ef Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Thu, 19 Jun 2025 23:40:17 +0800
Subject: [PATCH] fix: react suspense

---
 src/app/detail/page.tsx | 12 ++++++++++--
 src/app/douban/page.tsx | 11 ++++++++++-
 src/app/page.tsx        | 12 ++++++++++--
 src/app/play/page.tsx   | 11 ++++++++++-
 src/app/search/page.tsx | 33 +++++++++++++++++++++------------
 5 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx
index c3dc056..0d04702 100644
--- a/src/app/detail/page.tsx
+++ b/src/app/detail/page.tsx
@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import type { PlayRecord } from '@/lib/db.client';
 import { generateStorageKey, getAllPlayRecords } from '@/lib/db.client';
@@ -10,7 +10,7 @@ import { VideoDetail } from '@/lib/video';
 
 import PageLayout from '@/components/PageLayout';
 
-export default function DetailPage() {
+function DetailPageClient() {
   const searchParams = useSearchParams();
   const [detail, setDetail] = useState<VideoDetail | null>(null);
   const [loading, setLoading] = useState(true);
@@ -269,3 +269,11 @@ export default function DetailPage() {
     </PageLayout>
   );
 }
+
+export default function DetailPage() {
+  return (
+    <Suspense>
+      <DetailPageClient />
+    </Suspense>
+  );
+}
diff --git a/src/app/douban/page.tsx b/src/app/douban/page.tsx
index c657ee0..7b71806 100644
--- a/src/app/douban/page.tsx
+++ b/src/app/douban/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import DemoCard from '@/components/DemoCard';
@@ -20,7 +21,7 @@ interface DoubanResponse {
   list: DoubanItem[];
 }
 
-export default function DoubanPage() {
+function DoubanPageClient() {
   const searchParams = useSearchParams();
   const [doubanData, setDoubanData] = useState<DoubanItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -248,3 +249,11 @@ export default function DoubanPage() {
     </PageLayout>
   );
 }
+
+export default function DoubanPage() {
+  return (
+    <Suspense>
+      <DoubanPageClient />
+    </Suspense>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index befe122..9b3e410 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,7 @@ import {
   Tv,
   VenetianMask,
 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import CollectionCard from '@/components/CollectionCard';
@@ -52,7 +52,7 @@ const collections = [
   { icon: VenetianMask, title: '日漫', href: '/douban?type=tv&tag=日本动画' },
 ];
 
-export default function Home() {
+function HomeClient() {
   const [activeTab, setActiveTab] = useState('home');
   const [hotMovies, setHotMovies] = useState<DoubanItem[]>([]);
   const [hotTvShows, setHotTvShows] = useState<DoubanItem[]>([]);
@@ -177,3 +177,11 @@ export default function Home() {
     </PageLayout>
   );
 }
+
+export default function Home() {
+  return (
+    <Suspense>
+      <HomeClient />
+    </Suspense>
+  );
+}
diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx
index 25335a9..4c16c6e 100644
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -3,6 +3,7 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import React from 'react';
 
@@ -35,7 +36,7 @@ interface SearchResult {
   source_name: string;
 }
 
-export default function PlayPage() {
+function PlayPageClient() {
   const searchParams = useSearchParams();
   const artRef = useRef<HTMLDivElement>(null);
   const artPlayerRef = useRef<any>(null);
@@ -1344,3 +1345,11 @@ export default function PlayPage() {
     </div>
   );
 }
+
+export default function PlayPage() {
+  return (
+    <Suspense>
+      <PlayPageClient />
+    </Suspense>
+  );
+}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index b931968..965e2a4 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -2,25 +2,26 @@
 
 import { Search } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import PageLayout from '@/components/PageLayout';
 import VideoCard from '@/components/VideoCard';
 
-// 模拟搜索历史数据
-const mockSearchHistory = ['流浪地球', '三体', '狂飙', '满江红'];
+function SearchPageClient() {
+  // 模拟搜索历史数据
+  const mockSearchHistory = ['流浪地球', '三体', '狂飙', '满江红'];
 
-// 定义搜索结果类型
-type SearchResult = {
-  id: string;
-  title: string;
-  poster: string;
-  source: string;
-  source_name: string;
-  episodes?: number;
-};
+  // 定义搜索结果类型
+  type SearchResult = {
+    id: string;
+    title: string;
+    poster: string;
+    source: string;
+    source_name: string;
+    episodes?: number;
+  };
 
-export default function SearchPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [searchQuery, setSearchQuery] = useState('');
@@ -140,3 +141,11 @@ export default function SearchPage() {
     </PageLayout>
   );
 }
+
+export default function SearchPage() {
+  return (
+    <Suspense>
+      <SearchPageClient />
+    </Suspense>
+  );
+}