From 8bc35d979da54d0278440f1ab49881818f159a61 Mon Sep 17 00:00:00 2001
From: ZareMate <0.zaremate@gmail.com>
Date: Wed, 16 Apr 2025 19:05:49 +0200
Subject: [PATCH] feat: wrap FilePreviewContainerContent in Suspense for
 improved loading state handling

---
 src/app/share/page.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/share/page.tsx b/src/app/share/page.tsx
index e30be2f..044048f 100644
--- a/src/app/share/page.tsx
+++ b/src/app/share/page.tsx
@@ -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");
@@ -34,7 +34,7 @@ export default function FilePreviewContainer() {
     setDescription,
     fileId || undefined
   );
-  
+
   const getFileType = (extension: string): string => {
     const fileTypes: Record<string, string> = {
       ".mp4": "video/mp4",
@@ -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>
+  );
+}
+