11'use client' ;
22
33import { useRouter , useSearchParams } from 'next/navigation' ;
4- import React , { useState , useEffect , useCallback } from 'react' ;
4+ import React , { useState , useEffect , useCallback , Suspense } from 'react' ;
55import { Sparkles , Video , Users , ArrowRight } from 'lucide-react' ;
66import toast from 'react-hot-toast' ;
77
@@ -26,7 +26,7 @@ const encodeConnection = (connection: LiveKitConnectionDetails): string => {
2626 return btoa ( encodeURIComponent ( JSON . stringify ( connection ) ) ) ;
2727} ;
2828
29- export default function Page ( ) {
29+ function RoomsPageContent ( ) {
3030 const router = useRouter ( ) ;
3131 const searchParams = useSearchParams ( ) ;
3232 const [ roomId , setRoomId ] = useState ( '' ) ;
@@ -251,3 +251,54 @@ export default function Page() {
251251 </ div >
252252 ) ;
253253}
254+
255+ function RoomsPageFallback ( ) {
256+ return (
257+ < div className = { styles . pageWrapper } >
258+ < main className = { styles . main } >
259+ < div className = { styles . backgroundDecor } >
260+ < div className = { styles . gradientOrb1 } />
261+ < div className = { styles . gradientOrb2 } />
262+ </ div >
263+ < div className = { styles . header } >
264+ < div className = { styles . badge } >
265+ < Sparkles className = { styles . badgeIcon } />
266+ < span > 实时视频协作</ span >
267+ </ div >
268+ < h1 className = { styles . title } >
269+ < span className = { styles . titleGradient } > FlowSync</ span >
270+ < span className = { styles . titleAccent } > Video</ span >
271+ </ h1 >
272+ < p className = { styles . subtitle } >
273+ 基于 LiveKit 构建的实时视频协作平台,支持多人高清视频会议与屏幕共享
274+ </ p >
275+ </ div >
276+ < div className = { styles . cardContainer } >
277+ < div className = { styles . card } >
278+ < div className = { styles . primaryButton } aria-hidden >
279+ < Video className = { styles . buttonIcon } />
280+ < span > 加载中...</ span >
281+ </ div >
282+ </ div >
283+ </ div >
284+ </ main >
285+ < footer className = { styles . footer } >
286+ < p >
287+ Powered by{ ' ' }
288+ < a href = "https://livekit.io" target = "_blank" rel = "noopener noreferrer" >
289+ LiveKit
290+ </ a > { ' ' }
291+ · Built with ❤️ by DocFlow Team
292+ </ p >
293+ </ footer >
294+ </ div >
295+ ) ;
296+ }
297+
298+ export default function Page ( ) {
299+ return (
300+ < Suspense fallback = { < RoomsPageFallback /> } >
301+ < RoomsPageContent />
302+ </ Suspense >
303+ ) ;
304+ }
0 commit comments