feat(transactions): wrap TransactionsPageContent in Suspense for loading state

apps/web/app/dashboard/charge/page.tsx

@@ -303,7 +303,7 @@ function ChargePageContent() {
     }
   }, [selectedIdTag, activeIdTagSet, startResult]);
 
-  const { data: startedTransactionId, isFetching: locatingTx } = useQuery({
+  const { data: startedTransactionId } = useQuery({
     queryKey: [
       "latestStartedTx",
       startSnapshot?.cpId,

apps/web/app/dashboard/transactions/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Button, Chip, Modal, Pagination, Spinner, Table } from "@heroui/react";
 import Link from "next/link";
@@ -54,7 +54,7 @@ function formatDuration(start: string, stop: string | null): string {
   return `${h}h ${m}m`;
 }
 
-export default function TransactionsPage() {
+function TransactionsPageContent() {
   const searchParams = useSearchParams();
   const { data: sessionData } = useSession();
   const isAdmin = sessionData?.user?.role === "admin";
@@ -403,3 +403,17 @@ export default function TransactionsPage() {
     </div>
   );
 }
+
+export default function TransactionsPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-48 items-center justify-center">
+          <Spinner />
+        </div>
+      }
+    >
+      <TransactionsPageContent />
+    </Suspense>
+  );
+}