From a1e73465de0090f9841793e7ac26c620a493150a Mon Sep 17 00:00:00 2001
From: Simon Chaumet <simon.chaumet.ext@ovhcloud.com>
Date: Fri, 29 Nov 2024 14:48:02 +0100
Subject: [PATCH] perf(pci-private-network): remove blocking on pending for
 subnets

ref: TAPC-1826

Signed-off-by: Simon Chaumet <simon.chaumet.ext@ovhcloud.com>
---
 .../DatagridHeaderActions.component.tsx       |  5 +++
 .../localZone/PrivateNetworkLZ.page.tsx       | 44 ++++++++-----------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/manager/apps/pci-private-network/src/components/datagrid-header-actions/DatagridHeaderActions.component.tsx b/packages/manager/apps/pci-private-network/src/components/datagrid-header-actions/DatagridHeaderActions.component.tsx
index dab686c9aaab..9ac75528edc7 100644
--- a/packages/manager/apps/pci-private-network/src/components/datagrid-header-actions/DatagridHeaderActions.component.tsx
+++ b/packages/manager/apps/pci-private-network/src/components/datagrid-header-actions/DatagridHeaderActions.component.tsx
@@ -5,12 +5,14 @@ import {
   OsdsPopover,
   OsdsPopoverContent,
   OsdsSearchBar,
+  OsdsSpinner,
 } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
   ODS_ICON_SIZE,
+  ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
@@ -33,6 +35,7 @@ type Props = {
   pagination: PaginationState;
   setPagination: (pagination: PaginationState) => void;
   onCreate?: () => void;
+  isLoading?: boolean;
 };
 
 const DataGridHeaderActions: FC<Props> = ({
@@ -41,6 +44,7 @@ const DataGridHeaderActions: FC<Props> = ({
   pagination,
   setPagination,
   onCreate,
+  isLoading,
 }) => {
   const { filters, addFilter, removeFilter } = useColumnFilters();
   const [searchField, setSearchField] = useState<string>('');
@@ -91,6 +95,7 @@ const DataGridHeaderActions: FC<Props> = ({
           {createLabel}
         </OsdsButton>
         <div className="flex items-center">
+          {isLoading && <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
           <OsdsSearchBar value={searchField} onOdsSearchSubmit={onSearch} />
           <OsdsPopover ref={filterPopoverRef}>
             <OsdsButton
diff --git a/packages/manager/apps/pci-private-network/src/pages/listing/localZone/PrivateNetworkLZ.page.tsx b/packages/manager/apps/pci-private-network/src/pages/listing/localZone/PrivateNetworkLZ.page.tsx
index 2318f0fc6218..332c02ee1d72 100644
--- a/packages/manager/apps/pci-private-network/src/pages/listing/localZone/PrivateNetworkLZ.page.tsx
+++ b/packages/manager/apps/pci-private-network/src/pages/listing/localZone/PrivateNetworkLZ.page.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { OsdsSpinner, OsdsTabPanel } from '@ovhcloud/ods-components/react';
+import { OsdsTabPanel } from '@ovhcloud/ods-components/react';
 import {
   Datagrid,
   Notifications,
@@ -9,7 +9,6 @@ import {
   useDatagridSearchParams,
 } from '@ovh-ux/manager-react-components';
 import { applyFilters, FilterCategories } from '@ovh-ux/manager-core-api';
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
 import { PrivateNetworkTabName } from '../ListingLayout.constant';
 import { useActiveTab } from '@/hooks/useActiveTab/useActiveTab';
 import { usePrivateNetworkLZColumns } from '@/hooks/useColumns/useColumns';
@@ -61,30 +60,23 @@ const PrivateNetworkLZ: React.FC = () => {
       name={PrivateNetworkTabName.LOCAL_ZONE_TAB_NAME}
     >
       <Notifications />
-      {isPending ? (
-        <div className="mt-8 text-center">
-          <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
-        </div>
-      ) : (
-        <>
-          <DataGridHeaderActions
-            createLabel={t('pci_projects_project_network_private_create')}
-            onCreate={() => navigate('../new')}
-            pagination={pagination}
-            setPagination={setPagination}
-            columnFilters={columnFilters}
-          />
-          <div className="mt-10">
-            <Datagrid
-              columns={columns}
-              items={data.rows}
-              totalItems={data.totalRows}
-              pagination={pagination}
-              onPaginationChange={setPagination}
-            />
-          </div>
-        </>
-      )}
+      <DataGridHeaderActions
+        createLabel={t('pci_projects_project_network_private_create')}
+        onCreate={() => navigate('../new')}
+        pagination={pagination}
+        setPagination={setPagination}
+        columnFilters={columnFilters}
+        isLoading={isPending}
+      />
+      <div className="mt-10">
+        <Datagrid
+          columns={columns}
+          items={data.rows}
+          totalItems={data.totalRows}
+          pagination={pagination}
+          onPaginationChange={setPagination}
+        />
+      </div>
       <Outlet />
     </OsdsTabPanel>
   );