fix(ts): refactor codebase for capacitor setup

app/exam/pretest/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
@@ -18,47 +18,46 @@ interface Metadata {
   };
 }
 
-export default function PretestPage() {
+function PretestPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [examData, setExamData] = useState<Exam>();
   const { startExam, setCurrentExam } = useExam();
 
   // Get params from URL search params
-  const name = searchParams.get("name") || "";
   const id = searchParams.get("id") || "";
   const title = searchParams.get("title") || "";
   const rating = searchParams.get("rating") || "";
 
   const [metadata, setMetadata] = useState<Metadata | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  async function fetchQuestions() {
-    if (!id) return;
-
-    try {
-      setLoading(true);
-      const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
-        method: "GET",
-      });
-      if (!questionResponse.ok) {
-        throw new Error("Failed to fetch questions");
-      }
-      const data = await questionResponse.json();
-      const fetchedMetadata: Metadata = data;
-
-      setExamData(data);
-      setMetadata(fetchedMetadata);
-    } catch (error) {
-      console.error(error);
-      setError(error instanceof Error ? error.message : "An error occurred");
-    } finally {
-      setLoading(false);
-    }
-  }
+  const [error, setError] = useState<string>();
+  console.log(loading);
 
   useEffect(() => {
+    async function fetchQuestions() {
+      if (!id) return;
+
+      try {
+        setLoading(true);
+        const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
+          method: "GET",
+        });
+        if (!questionResponse.ok) {
+          throw new Error("Failed to fetch questions");
+        }
+        const data = await questionResponse.json();
+        const fetchedMetadata: Metadata = data;
+
+        setExamData(data);
+        setMetadata(fetchedMetadata);
+      } catch (error) {
+        console.error(error);
+        setError(error instanceof Error ? error.message : "An error occurred");
+      } finally {
+        setLoading(false);
+      }
+    }
     if (id) {
       fetchQuestions();
     }
@@ -74,15 +73,16 @@ export default function PretestPage() {
             </button>
             <DestructibleAlert text={error} extraStyles="" />
           </div>
-          {/* <CustomBackHandler fallbackRoute="paper" /> */}
         </div>
       </BackgroundWrapper>
     );
   }
 
   function handleStartExam() {
+    if (!examData) return;
+
     setCurrentExam(examData);
-    startExam(examData); // Pass examData directly
+    startExam(examData);
     router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);
   }
   return (
@@ -192,3 +192,22 @@ export default function PretestPage() {
     </BackgroundWrapper>
   );
 }
+
+export default function PretestPage() {
+  return (
+    <Suspense
+      fallback={
+        <BackgroundWrapper>
+          <div className="min-h-screen">
+            <div className="mx-10 mt-10 flex flex-col justify-center items-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
+              <p className="text-lg font-medium text-gray-900">Loading...</p>
+            </div>
+          </div>
+        </BackgroundWrapper>
+      }
+    >
+      <PretestPageContent />
+    </Suspense>
+  );
+}