feat(zones): fetch base data and statistics separately

src/app/api/query/zones.ts

@@ -1,4 +1,4 @@
-import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { useWebsocketAwareQuery } from "@/app/api/query/base";
 import {
@@ -15,6 +15,9 @@ import type {
   GetZoneData,
   GetZoneErrors,
   GetZoneResponses,
+  ListZonesData,
+  ListZonesErrors,
+  ListZonesResponses,
   ListZonesWithSummaryData,
   ListZonesWithSummaryErrors,
   ListZonesWithSummaryResponses,
@@ -24,24 +27,40 @@ import type {
   UpdateZoneResponses,
 } from "@/app/apiclient";
 import {
-  deleteZone,
-  updateZone,
   createZone,
+  deleteZone,
   getZone,
+  listZones,
   listZonesWithSummary,
+  updateZone,
 } from "@/app/apiclient";
 import {
   getZoneQueryKey,
+  listZonesQueryKey,
   listZonesWithSummaryQueryKey,
 } from "@/app/apiclient/@tanstack/react-query.gen";
 
-export const useZones = (options?: Options<ListZonesWithSummaryData>) => {
-  return useWebsocketAwareQuery(
-    queryOptionsWithHeaders<
+export const useZones = (
+  options?: Options<ListZonesWithSummaryData>,
+  enabled?: boolean
+) => {
+  return useWebsocketAwareQuery({
+    ...queryOptionsWithHeaders<
       ListZonesWithSummaryResponses,
       ListZonesWithSummaryErrors,
       ListZonesWithSummaryData
-    >(options, listZonesWithSummary, listZonesWithSummaryQueryKey(options))
+    >(options, listZonesWithSummary, listZonesWithSummaryQueryKey(options)),
+    enabled: enabled !== undefined ? enabled : true,
+  });
+};
+
+export const useBaseZones = (options?: Options<ListZonesData>) => {
+  return useWebsocketAwareQuery(
+    queryOptionsWithHeaders<ListZonesResponses, ListZonesErrors, ListZonesData>(
+      options,
+      listZones,
+      listZonesQueryKey(options)
+    )
   );
 };
 

src/app/zones/components/ZonesTable/ZonesTable.tsx

@@ -1,36 +1,75 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { GenericTable } from "@canonical/maas-react-components";
 
-import { useZones } from "@/app/api/query/zones";
+import { useBaseZones, useZones } from "@/app/api/query/zones";
 import usePagination from "@/app/base/hooks/usePagination/usePagination";
+import type { ZoneRow } from "@/app/zones/components/ZonesTable/useZonesTableColumns/useZonesTableColumns";
 import useZonesTableColumns from "@/app/zones/components/ZonesTable/useZonesTableColumns/useZonesTableColumns";
 
 import "./_index.scss";
 
 const ZonesTable: React.FC = () => {
   const { page, debouncedPage, size, handlePageSizeChange, setPage } =
     usePagination();
-  const zones = useZones({
+
+  const baseZones = useBaseZones({
     query: { page: debouncedPage, size },
   });
 
-  const columns = useZonesTableColumns();
+  const zonesWithSummary = useZones(
+    {
+      query: { page: debouncedPage, size },
+    },
+    baseZones.isSuccess
+  );
+
+  const columns = useZonesTableColumns({
+    isSummaryPending: zonesWithSummary.isPending,
+  });
+
+  const data = useMemo((): ZoneRow[] => {
+    if (!baseZones.data) {
+      return [];
+    }
+
+    if (!zonesWithSummary.data) {
+      return baseZones.data.items.map((item) => ({
+        ...item,
+        devices_count: undefined,
+        machines_count: undefined,
+        controllers_count: undefined,
+      }));
+    }
+
+    return baseZones.data.items.map((item) => ({
+      ...item,
+      devices_count: zonesWithSummary.data.items.find(
+        (zone) => zone.id === item.id
+      )?.devices_count,
+      controllers_count: zonesWithSummary.data.items.find(
+        (zone) => zone.id === item.id
+      )?.controllers_count,
+      machines_count: zonesWithSummary.data.items.find(
+        (zone) => zone.id === item.id
+      )?.machines_count,
+    }));
+  }, [baseZones.data, zonesWithSummary.data]);
 
   return (
     <GenericTable
       columns={columns}
-      data={zones.data?.items ?? []}
-      isLoading={zones.isPending}
+      data={data}
+      isLoading={baseZones.isPending}
       noData="No zones found."
       pagination={{
         currentPage: page,
         dataContext: "zones",
         handlePageSizeChange: handlePageSizeChange,
-        isPending: zones.isPending,
+        isPending: baseZones.isPending,
         itemsPerPage: size,
         setCurrentPage: setPage,
-        totalItems: zones.data?.total ?? 0,
+        totalItems: zonesWithSummary.data?.total ?? 0,
       }}
       sorting={[{ id: "machines_count", desc: true }]}
     />

src/app/zones/components/ZonesTable/useZonesTableColumns/useZonesTableColumns.tsx

@@ -1,21 +1,27 @@
 import { useMemo } from "react";
 
-import type { ColumnDef, Row } from "@tanstack/react-table";
+import { Spinner } from "@canonical/react-components";
+import type { ColumnDef } from "@tanstack/react-table";
 import { Link } from "react-router";
 
 import { useGetIsSuperUser } from "@/app/api/query/auth";
-import type { ZoneWithSummaryResponse } from "@/app/apiclient";
+import type { ZoneResponse, ZoneWithSummaryResponse } from "@/app/apiclient";
 import TableActions from "@/app/base/components/TableActions";
 import { useSidePanel } from "@/app/base/side-panel-context-new";
 import urls from "@/app/base/urls";
 import { FilterDevices } from "@/app/store/device/utils";
 import { FilterMachines } from "@/app/store/machine/utils";
 import { DeleteZone, EditZone } from "@/app/zones/components";
 
-export type ZoneColumnDef = ColumnDef<
-  ZoneWithSummaryResponse,
-  Partial<ZoneWithSummaryResponse>
->;
+export type ZoneRow = Partial<
+  Pick<
+    ZoneWithSummaryResponse,
+    "controllers_count" | "devices_count" | "machines_count"
+  >
+> &
+  ZoneResponse;
+
+export type ZoneColumnDef = ColumnDef<ZoneRow, Partial<ZoneRow>>;
 
 const filterDevices = (name: string) =>
   FilterDevices.filtersToQueryString({
@@ -27,11 +33,15 @@ const machinesFilter = (name: string) =>
     zone: [name],
   });
 
-const useZonesTableColumns = (): ZoneColumnDef[] => {
+const useZonesTableColumns = ({
+  isSummaryPending,
+}: {
+  isSummaryPending: boolean;
+}): ZoneColumnDef[] => {
   const { openSidePanel } = useSidePanel();
   const isSuperUser = useGetIsSuperUser();
   return useMemo(
-    () => [
+    (): ZoneColumnDef[] => [
       {
         id: "name",
         accessorKey: "name",
@@ -50,6 +60,10 @@ const useZonesTableColumns = (): ZoneColumnDef[] => {
         enableSorting: true,
         header: "Machines",
         cell: ({ row }) => {
+          if (isSummaryPending) {
+            return <Spinner />;
+          }
+
           return (
             <Link
               className="u-align--right"
@@ -66,6 +80,10 @@ const useZonesTableColumns = (): ZoneColumnDef[] => {
         enableSorting: true,
         header: "Devices",
         cell: ({ row }) => {
+          if (isSummaryPending) {
+            return <Spinner />;
+          }
+
           return (
             <Link
               className="u-align--right"
@@ -82,6 +100,10 @@ const useZonesTableColumns = (): ZoneColumnDef[] => {
         enableSorting: true,
         header: "Controllers",
         cell: ({ row }) => {
+          if (isSummaryPending) {
+            return <Spinner />;
+          }
+
           return (
             <Link className="u-align--right" to={`${urls.controllers.index}`}>
               {row.original.controllers_count}
@@ -94,7 +116,7 @@ const useZonesTableColumns = (): ZoneColumnDef[] => {
         accessorKey: "id",
         enableSorting: false,
         header: "Actions",
-        cell: ({ row }: { row: Row<ZoneWithSummaryResponse> }) => {
+        cell: ({ row }) => {
           const canBeDeleted = isSuperUser.data && row.original.id !== 1;
           return (
             <TableActions
@@ -124,7 +146,7 @@ const useZonesTableColumns = (): ZoneColumnDef[] => {
         },
       },
     ],
-    [isSuperUser.data, openSidePanel]
+    [isSummaryPending, isSuperUser.data, openSidePanel]
   );
 };