Fix infinite render loop on retention policies settings page

Author: cephalization

app/src/pages/settings/RetentionPoliciesTable.tsx

@@ -11,10 +11,8 @@ import { css } from "@emotion/react";
 
 import { Link } from "@phoenix/components";
 import { tableCSS } from "@phoenix/components/table/styles";
-import {
-  useNotifySuccess,
-  useViewerCanManageRetentionPolicy,
-} from "@phoenix/contexts";
+import { useNotifySuccess } from "@phoenix/contexts/NotificationContext";
+import { useViewerCanManageRetentionPolicy } from "@phoenix/contexts/ViewerContext";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { createPolicyScheduleSummaryText } from "@phoenix/utils/retentionPolicyUtils";
 
@@ -87,14 +85,18 @@ export const RetentionPoliciesTable = ({
   );
 
   const connectionId = data.projectTraceRetentionPolicies.__id;
-  const tableData = data.projectTraceRetentionPolicies.edges.map((edge) => {
-    const node = edge.node;
-    const data = readInlineData<RetentionPoliciesTable_retentionPolicy$key>(
-      RETENTION_POLICY_FRAGMENT,
-      node
-    );
-    return data;
-  });
+  const tableData = useMemo(
+    () =>
+      data.projectTraceRetentionPolicies.edges.map((edge) => {
+        const node = edge.node;
+        const data = readInlineData<RetentionPoliciesTable_retentionPolicy$key>(
+          RETENTION_POLICY_FRAGMENT,
+          node
+        );
+        return data;
+      }),
+    [data]
+  );
 
   const columns: ColumnDef<(typeof tableData)[number]>[] = useMemo(() => {
     const columns: ColumnDef<(typeof tableData)[number]>[] = [
@@ -193,7 +195,7 @@ export const RetentionPoliciesTable = ({
     return columns;
   }, [canManageRetentionPolicy, notifySuccess, connectionId]);
 
-  const table = useReactTable<(typeof tableData)[number]>({
+  const table = useReactTable({
     columns,
     data: tableData,
     getCoreRowModel: getCoreRowModel(),

app/src/pages/settings/SettingsPage.tsx

@@ -1,9 +1,9 @@
-import { useCallback } from "react";
-import { Key } from "react-aria-components";
+import { Suspense, useCallback } from "react";
+import { Collection, Key } from "react-aria-components";
 import { Navigate, Outlet, useLocation, useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { LazyTabPanel, Tab, TabList, Tabs } from "@phoenix/components";
+import { Loading, Tab, TabList, TabPanel, Tabs } from "@phoenix/components";
 
 const settingsPageCSS = css`
   overflow-y: auto;
@@ -20,6 +20,15 @@ const settingsPageInnerCSS = css`
   margin-right: auto;
 `;
 
+const tabs: { id: string; label: string }[] = [
+  { id: "general", label: "General" },
+  { id: "providers", label: "AI Providers" },
+  { id: "models", label: "Models" },
+  { id: "annotations", label: "Annotations" },
+  { id: "prompts", label: "Prompts" },
+  { id: "data", label: "Data Retention" },
+];
+
 export function SettingsPage() {
   const { pathname } = useLocation();
   const navigate = useNavigate();
@@ -47,24 +56,15 @@ export function SettingsPage() {
             <Tab id="prompts">Prompts</Tab>
             <Tab id="data">Data Retention</Tab>
           </TabList>
-          <LazyTabPanel id="general" padded>
-            <Outlet />
-          </LazyTabPanel>
-          <LazyTabPanel id="providers" padded>
-            <Outlet />
-          </LazyTabPanel>
-          <LazyTabPanel id="models" padded>
-            <Outlet />
-          </LazyTabPanel>
-          <LazyTabPanel id="annotations" padded>
-            <Outlet />
-          </LazyTabPanel>
-          <LazyTabPanel id="prompts" padded>
-            <Outlet />
-          </LazyTabPanel>
-          <LazyTabPanel id="data" padded>
-            <Outlet />
-          </LazyTabPanel>
+          <Collection items={tabs}>
+            {(item) => (
+              <TabPanel id={item.id} padded>
+                <Suspense fallback={<Loading />}>
+                  <Outlet />
+                </Suspense>
+              </TabPanel>
+            )}
+          </Collection>
         </Tabs>
       </div>
     </main>