Project list view: Fetch notebooks for projects only on row render

frontend/src/pages/projects/screens/projects/ProjectListView.tsx

@@ -12,7 +12,6 @@ import {
   initialProjectsFilterData,
   ProjectsFilterDataType,
 } from '~/pages/projects/screens/projects/const';
-import { useWatchProjectNotebooks } from '~/utilities/useWatchProjectNotebooks';
 import { columns } from './tableData';
 import DeleteProjectModal from './DeleteProjectModal';
 import ManageProjectModal from './ManageProjectModal';
@@ -30,12 +29,6 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({ allowCreate }) => {
     () => setFilterData(initialProjectsFilterData),
     [setFilterData],
   );
-  const namespaces = React.useMemo(
-    () => projects.map((project) => project.metadata.name),
-    [projects],
-  );
-  const [projectNotebooks, loaded] = useWatchProjectNotebooks(namespaces);
-
   const filteredProjects = React.useMemo(
     () =>
       projects.filter((project) => {
@@ -72,7 +65,7 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({ allowCreate }) => {
     <>
       <Table
         enablePagination
-        loading={!loaded}
+        loading={false}
         variant="compact"
         defaultSortColumn={0}
         data={filteredProjects}
@@ -84,7 +77,6 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({ allowCreate }) => {
           <ProjectTableRow
             key={project.metadata.uid}
             obj={project}
-            notebooks={projectNotebooks[project.metadata.name] || []}
             isRefreshing={refreshIds.includes(project.metadata.uid || '')}
             setEditData={(data) => setEditData(data)}
             setDeleteData={(data) => setDeleteData(data)}

frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { Text, TextVariants, Timestamp } from '@patternfly/react-core';
+import { Spinner, Text, TextVariants, Timestamp } from '@patternfly/react-core';
 import { ActionsColumn, Tbody, Td, Tr } from '@patternfly/react-table';
-import { NotebookKind, ProjectKind } from '~/k8sTypes';
+import { ProjectKind } from '~/k8sTypes';
 import NotebookIcon from '~/images/icons/NotebookIcon';
 import useProjectTableRowItems from '~/pages/projects/screens/projects/useProjectTableRowItems';
 import { getProjectOwner } from '~/concepts/projects/utils';
 import ProjectTableRowNotebookTable from '~/pages/projects/screens/projects/ProjectTableRowNotebookTable';
 import { TableRowTitleDescription } from '~/components/table';
 import ResourceNameTooltip from '~/components/ResourceNameTooltip';
 import { getDescriptionFromK8sResource } from '~/concepts/k8s/utils';
+import { useWatchNotebooks } from '~/utilities/useWatchNotebooks';
 import ProjectLink from './ProjectLink';
 
 // Plans to add other expandable columns in the future
@@ -18,14 +19,12 @@ export enum ExpandableColumns {
 
 type ProjectTableRowProps = {
   obj: ProjectKind;
-  notebooks: NotebookKind[];
   isRefreshing: boolean;
   setEditData: (data: ProjectKind) => void;
   setDeleteData: (data: ProjectKind) => void;
 };
 const ProjectTableRow: React.FC<ProjectTableRowProps> = ({
   obj: project,
-  notebooks,
   isRefreshing,
   setEditData,
   setDeleteData,
@@ -38,6 +37,7 @@ const ProjectTableRow: React.FC<ProjectTableRowProps> = ({
     setEditData,
     setDeleteData,
   );
+  const [notebooks, loaded] = useWatchNotebooks(project.metadata.name);
 
   const toggleExpandColumn = (colIndex: ExpandableColumns) => {
     setExpandColumn(expandColumn === colIndex ? undefined : colIndex);
@@ -93,7 +93,7 @@ const ProjectTableRow: React.FC<ProjectTableRowProps> = ({
         >
           <span>
             <NotebookIcon className="pf-v5-u-mr-xs" />
-            {notebooks.length}
+            {loaded ? notebooks.length : <Spinner size="sm" />}
           </span>
         </Td>
         <Td

frontend/src/utilities/useWatchNotebooks.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import useFetchState, { FetchState } from '~/utilities/useFetchState';
+import { NotebookKind } from '~/k8sTypes';
+import { getNotebooks } from '~/api';
+import { POLL_INTERVAL } from '~/utilities/const';
+
+export const useWatchNotebooks = (
+  namespace: string,
+  refreshRate = POLL_INTERVAL,
+): FetchState<NotebookKind[]> =>
+  useFetchState<NotebookKind[]>(
+    React.useCallback(() => getNotebooks(namespace), [namespace]),
+    [],
+    { refreshRate },
+  );