fix(ts): refactor codebase for capacitor setup

app/(tabs)/paper/page.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import Header from "@/components/Header";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
@@ -15,7 +15,7 @@ interface Mock {
   rating: number;
 }
 
-export default function PaperScreen() {
+function PaperPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const name = searchParams.get("name") || "";
@@ -23,7 +23,6 @@ export default function PaperScreen() {
   const [questions, setQuestions] = useState<Mock[] | null>(null);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState<boolean>(false);
-  const [componentKey, setComponentKey] = useState<number>(0);
 
   async function fetchMocks() {
     try {
@@ -45,12 +44,7 @@ export default function PaperScreen() {
 
   const onRefresh = async () => {
     setRefreshing(true);
-
     await fetchMocks();
-    setComponentKey((prevKey) => prevKey + 1);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 1000);
   };
 
   if (errorMsg) {
@@ -124,3 +118,20 @@ export default function PaperScreen() {
     </BackgroundWrapper>
   );
 }
+
+export default function PaperScreen() {
+  <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>
+    }
+  >
+    <PaperPageContent />
+  </Suspense>;
+}