React 19 improvements (#4160)

Split mirror pages into server/client components,
fetch data server-side and resolve via React.use()

Add Suspense fallbacks to layouts, error boundary for mirror detail

Replace setLoading callbacks with useTransition in form handlers

Use <Context> directly instead of <Context.Provider>

Author: serprex

ui/app/mirror-logs/layout.tsx

@@ -2,6 +2,7 @@
 import { Configuration } from '@/app/config/config';
 import SidebarComponent from '@/components/SidebarComponent';
 import { Layout } from '@/lib/Layout';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { PropsWithChildren, Suspense } from 'react';
 
 export default async function PageLayout({ children }: PropsWithChildren) {
@@ -13,7 +14,11 @@ export default async function PageLayout({ children }: PropsWithChildren) {
         />
       }
     >
-      <Suspense>{children}</Suspense>
+      <Suspense
+        fallback={<ProgressCircle variant='determinate_progress_circle' />}
+      >
+        {children}
+      </Suspense>
     </Layout>
   );
 }

ui/app/mirrors/[mirrorId]/ViewMirror.tsx

@@ -0,0 +1,94 @@
+'use client';
+import { FormatStatus } from '@/app/utils/flowstatus';
+import MirrorActions from '@/components/MirrorActionsDropdown';
+import { FlowStatus } from '@/grpc_generated/flow';
+import { DBType, dBTypeFromJSON } from '@/grpc_generated/peers';
+import { MirrorStatusResponse } from '@/grpc_generated/route';
+import { Badge } from '@/lib/Badge';
+import { Header } from '@/lib/Header';
+import { Label } from '@/lib/Label';
+import { LayoutMain } from '@/lib/Layout';
+import React from 'react';
+import { CDCMirror } from './cdc';
+import QrepGraph from './qrepGraph';
+import QRepStatusButtons from './qrepStatusButtons';
+import QRepStatusTable from './qrepStatusTable';
+import SyncStatus from './syncStatus';
+
+type ViewMirrorProps = {
+  mirrorId: string;
+  mirrorStatePromise: Promise<MirrorStatusResponse>;
+};
+
+export default function ViewMirror({
+  mirrorId,
+  mirrorStatePromise,
+}: ViewMirrorProps) {
+  const mirrorState = React.use(mirrorStatePromise);
+
+  if (mirrorState?.cdcStatus) {
+    const dbType = dBTypeFromJSON(mirrorState.cdcStatus.destinationType);
+
+    const isNotPaused =
+      mirrorState.currentFlowState.toString() !==
+      FlowStatus[FlowStatus.STATUS_PAUSED];
+    const canResync =
+      mirrorState.currentFlowState.toString() !==
+        FlowStatus[FlowStatus.STATUS_SETUP] &&
+      (dbType.valueOf() === DBType.BIGQUERY.valueOf() ||
+        dbType.valueOf() === DBType.SNOWFLAKE.valueOf() ||
+        dbType.valueOf() === DBType.POSTGRES.valueOf() ||
+        dbType.valueOf() === DBType.CLICKHOUSE.valueOf());
+
+    return (
+      <LayoutMain alignSelf='flex-start' justifySelf='flex-start' width='full'>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingRight: '2rem',
+          }}
+        >
+          <Header variant='title2'>{mirrorId}</Header>
+          <MirrorActions
+            mirrorName={mirrorId}
+            editLink={`/mirrors/${mirrorId}/edit`}
+            canResync={canResync}
+            isNotPaused={isNotPaused}
+          />
+        </div>
+        <CDCMirror
+          syncStatusChild={<SyncStatus flowJobName={mirrorId} />}
+          status={mirrorState}
+        />
+      </LayoutMain>
+    );
+  } else if (mirrorState?.qrepStatus) {
+    return (
+      <LayoutMain alignSelf='flex-start' justifySelf='flex-start' width='full'>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingRight: '2rem',
+            marginBottom: '1rem',
+          }}
+        >
+          <Header variant='title2'>{mirrorId}</Header>
+          <QRepStatusButtons mirrorId={mirrorId} />
+        </div>
+        <Label>
+          Status: <Badge>{FormatStatus(mirrorState.currentFlowState)}</Badge>
+        </Label>
+        <QrepGraph syncs={mirrorState.qrepStatus.partitions} />
+        <br></br>
+        <QRepStatusTable
+          flowJobName={mirrorId}
+          partitions={mirrorState.qrepStatus.partitions}
+        />
+      </LayoutMain>
+    );
+  }
+}