feat: wrap FilePreviewContainerContent in Suspense for improved loading state handling
This commit is contained in:
		
							parent
							
								
									e1097ba1be
								
							
						
					
					
						commit
						8bc35d979d
					
				| @ -1,6 +1,6 @@ | ||||
| "use client"; | ||||
| 
 | ||||
| import { useEffect, useState, useRef } from "react"; | ||||
| import { useEffect, useState, useRef, Suspense } from "react"; | ||||
| import { useSearchParams, useRouter } from "next/navigation"; | ||||
| import toast, { Toaster } from "react-hot-toast"; | ||||
| import { FilePreview } from "~/app/_components/FilePreview"; | ||||
| @ -20,7 +20,7 @@ interface FileDetails { | ||||
|   description: string; | ||||
| } | ||||
| 
 | ||||
| export default function FilePreviewContainer() { | ||||
| function FilePreviewContainerContent() { | ||||
|   const searchParams = useSearchParams(); | ||||
|   const router = useRouter(); | ||||
|   const fileId = searchParams.get("id"); | ||||
| @ -49,7 +49,7 @@ export default function FilePreviewContainer() { | ||||
|       ".wav": "audio/wav", | ||||
|     }; | ||||
|     return fileTypes[extension] || "unknown"; | ||||
|   } | ||||
|   }; | ||||
| 
 | ||||
|   useEffect(() => { | ||||
|     if (!fileId) { | ||||
| @ -139,7 +139,6 @@ export default function FilePreviewContainer() { | ||||
|           </h1> | ||||
|           <div className="mt-6"> | ||||
|             {fileDetails.type !== "unknown" && ( | ||||
|                | ||||
|               <FilePreview fileId={fileDetails.id} fileType={getFileType(fileDetails.type)} /> | ||||
|             )} | ||||
|           </div> | ||||
| @ -252,3 +251,11 @@ export default function FilePreviewContainer() { | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| export default function FilePreviewContainer() { | ||||
|   return ( | ||||
|     <Suspense fallback={<div>Loading...</div>}> | ||||
|       <FilePreviewContainerContent /> | ||||
|     </Suspense> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user