Fix Next.js pre-rendering error by wrapping useSearchParams in Suspense

frontend/app/page.tsx

@@ -1,16 +1,13 @@
 "use client";
 
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import axios from "axios";
 import { ArrowRight, CloudUpload, CheckCircle, Menu, X, Fingerprint, Activity, Network } from "lucide-react";
 import UploadZone from "@/components/upload/UploadZone";
 import Navbar from "@/components/shared/Navbar";
 
-export default function LandingPage() {
-    const router = useRouter();
-
-    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+function DeletedToastManager() {
     const searchParams = useSearchParams();
     const [deletedToast, setDeletedToast] = useState(false);
 
@@ -26,6 +23,22 @@ export default function LandingPage() {
         }
     }, [searchParams]);
 
+    if (!deletedToast) return null;
+
+    return (
+        <div className="fixed top-24 left-1/2 -translate-x-1/2 z-[100] bg-green-500/10 border border-green-500/20 text-green-400 px-6 py-3 rounded-full flex items-center gap-3 shadow-[0_0_40px_rgba(34,197,94,0.2)] animate-[fade-in_0.5s_ease-out]">
+            <CheckCircle className="w-5 h-5" />
+            <span className="font-bold tracking-widest uppercase text-sm">Account Deleted Successfully</span>
+        </div>
+    );
+}
+
+export default function LandingPage() {
+    const router = useRouter();
+
+    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+
+
     useEffect(() => {
         const handleDragOver = (e: DragEvent) => {
             e.preventDefault();
@@ -331,12 +344,9 @@ export default function LandingPage() {
             )}
 
             {/* Deleted Account Toast */}
-            {deletedToast && (
-                <div className="fixed top-24 left-1/2 -translate-x-1/2 z-[100] bg-green-500/10 border border-green-500/20 text-green-400 px-6 py-3 rounded-full flex items-center gap-3 shadow-[0_0_40px_rgba(34,197,94,0.2)] animate-[fade-in_0.5s_ease-out]">
-                    <CheckCircle className="w-5 h-5" />
-                    <span className="font-bold tracking-widest uppercase text-sm">Account Deleted Successfully</span>
-                </div>
-            )}
+            <Suspense fallback={null}>
+                <DeletedToastManager />
+            </Suspense>
 
             {/* Global Navbar */}
             <Navbar />