perf: memoize dashboard streams table and activity list to prevent unnecessary re-renders

frontend/src/app/streams/create/create-stream-content.tsx

@@ -178,18 +178,19 @@ export default function CreateStreamContent() {
 
       if (result.success) {
         setTxState("confirming");
-        clearDraft(); // Clear draft on successful submission
+        clearDraft();
         toast.success("Stream created successfully!");
         setTimeout(() => {
+          setLoading(false);
+          setTxState("idle");
           router.push("/dashboard");
         }, 2000);
       }
     } catch (error) {
-      logger.error("Stream creation failed:", error);
-      toast.error(toSorobanErrorMessage(error));
-    } finally {
       setLoading(false);
       setTxState("idle");
+      logger.error("Stream creation failed:", error);
+      toast.error(toSorobanErrorMessage(error));
     }
   };
 

frontend/src/components/dashboard/dashboard-view.tsx

@@ -366,12 +366,17 @@ function renderAnalytics(snapshot: DashboardSnapshot | null) {
   );
 }
 
-function renderStreams(
-  snapshot: DashboardSnapshot | null,
-  onTopUp: (stream: Stream) => void,
-  onCancel: (stream: Stream) => void,
-  onShowDetails: (stream: Stream) => void,
-) {
+const StreamsTable = React.memo(function StreamsTable({
+  snapshot,
+  onTopUp,
+  onCancel,
+  onShowDetails,
+}: {
+  snapshot: DashboardSnapshot | null;
+  onTopUp: (stream: Stream) => void;
+  onCancel: (stream: Stream) => void;
+  onShowDetails: (stream: Stream) => void;
+}) {
   if (!snapshot) return null;
   return (
     <section className="dashboard-panel">
@@ -448,12 +453,15 @@ function renderStreams(
       </div>
     </section>
   );
-}
+});
 
-function renderRecentActivity(
-  snapshot: DashboardSnapshot | null,
-  onCreateStream?: () => void,
-) {
+const RecentActivityList = React.memo(function RecentActivityList({
+  snapshot,
+  onCreateStream,
+}: {
+  snapshot: DashboardSnapshot | null;
+  onCreateStream?: () => void;
+}) {
   if (!snapshot) return null;
 
   if (snapshot.recentActivity.length === 0) {
@@ -501,7 +509,7 @@ function renderRecentActivity(
       </ul>
     </section>
   );
-}
+});
 
 // ─── Main Component ───────────────────────────────────────────────────────────
 
@@ -573,6 +581,23 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     React.useState<string | null>(null);
   const [isFormSubmitting, setIsFormSubmitting] = React.useState(false);
 
+  const handleTopUp = React.useCallback(
+    (s: Stream) => setModal({ type: "topup", stream: s }),
+    [],
+  );
+  const handleCancel = React.useCallback(
+    (s: Stream) => setModal({ type: "cancel", stream: s }),
+    [],
+  );
+  const handleShowDetails = React.useCallback(
+    (s: Stream) => setModal({ type: "details", stream: s }),
+    [],
+  );
+  const handleShowWizard = React.useCallback(
+    () => setShowWizard(true),
+    [],
+  );
+
   const safeLoadTemplates = (): StreamTemplate[] => {
     try {
       if (typeof window === "undefined") return [];
@@ -988,13 +1013,13 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
         <div className="dashboard-content-stack mt-8">
           {renderStats(snapshot)}
           {renderAnalytics(snapshot)}
-          {renderStreams(
-            snapshot,
-            (s) => setModal({ type: "topup", stream: s }),
-            (s) => setModal({ type: "cancel", stream: s }),
-            (s) => setModal({ type: "details", stream: s }),
-          )}
-          {renderRecentActivity(snapshot, () => setShowWizard(true))}
+          <StreamsTable
+            snapshot={snapshot}
+            onTopUp={handleTopUp}
+            onCancel={handleCancel}
+            onShowDetails={handleShowDetails}
+          />
+          <RecentActivityList snapshot={snapshot} onCreateStream={handleShowWizard} />
         </div>
       );
     }
@@ -1042,12 +1067,12 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
       }
       return (
         <div className="mt-8">
-          {renderStreams(
-            { ...snapshot!, outgoingStreams: activeOutgoing },
-            (s) => setModal({ type: "topup", stream: s }),
-            (s) => setModal({ type: "cancel", stream: s }),
-            (s) => setModal({ type: "details", stream: s }),
-          )}
+          <StreamsTable
+            snapshot={{ ...snapshot!, outgoingStreams: activeOutgoing }}
+            onTopUp={handleTopUp}
+            onCancel={handleCancel}
+            onShowDetails={handleShowDetails}
+          />
         </div>
       );
     }
@@ -1099,7 +1124,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     if (activeTab === "activity") {
       return (
         <div className="mt-8">
-          {renderRecentActivity(snapshot, () => setShowWizard(true))}
+          <RecentActivityList snapshot={snapshot} onCreateStream={handleShowWizard} />
         </div>
       );
     }