perf(pci-private-network): remove blocking on pending for subnets

ref: TAPC-1826 Signed-off-by: Simon Chaumet <[email protected]>
ovh · Nov 29, 2024 · a1e7346 · a1e7346
1 parent 5f9cdba
commit a1e7346
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/...rivate-network/src/components/datagrid-header-actions/DatagridHeaderActions.component.tsx b/...rivate-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/...es/manager/apps/pci-private-network/src/pages/listing/localZone/PrivateNetworkLZ.page.tsx b/...es/manager/apps/pci-private-network/src/pages/listing/localZone/PrivateNetworkLZ.page.tsx
@@ -1,15 +1,14 @@
 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,
   useColumnFilters,
   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>
   );