From 24e7b4507c5862cfcf6c42455abb9678fbd78afa Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad.muhammad@elastic.co>
Date: Tue, 2 Aug 2022 14:18:25 +0100
Subject: [PATCH] add loading

---
 .../manage_locations/delete_location.tsx                 | 3 +++
 .../hooks/use_location_monitors.test.tsx                 | 5 +++--
 .../manage_locations/hooks/use_location_monitors.ts      | 8 ++++----
 .../manage_locations/locations_table.tsx                 | 9 +++++++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/delete_location.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/delete_location.tsx
index bc9cb5576cc46..5179858413ac7 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/delete_location.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/delete_location.tsx
@@ -11,11 +11,13 @@ import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 
 export const DeleteLocation = ({
+  loading,
   id,
   locationMonitors,
   onDelete,
 }: {
   id: string;
+  loading?: boolean;
   onDelete: (id: string) => void;
   locationMonitors: Array<{ id: string; count: number }>;
 }) => {
@@ -54,6 +56,7 @@ export const DeleteLocation = ({
         }
       >
         <EuiButtonIcon
+          isLoading={loading}
           iconType="trash"
           color="danger"
           aria-label={DELETE_LABEL}
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.test.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.test.tsx
index 758b481fb4269..89317f6ea2400 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.test.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.test.tsx
@@ -14,7 +14,7 @@ describe('useLocationMonitors', () => {
   it('returns expected results', () => {
     const { result } = renderHook(() => useLocationMonitors(), { wrapper: WrappedHelper });
 
-    expect(result.current).toStrictEqual({ locationMonitors: [] });
+    expect(result.current).toStrictEqual({ locationMonitors: [], loading: true });
     expect(defaultCore.savedObjects.client.find).toHaveBeenCalledWith({
       aggs: {
         locations: {
@@ -42,11 +42,12 @@ describe('useLocationMonitors', () => {
       wrapper: WrappedHelper,
     });
 
-    expect(result.current).toStrictEqual({ locationMonitors: [] });
+    expect(result.current).toStrictEqual({ locationMonitors: [], loading: true });
 
     await waitForNextUpdate();
 
     expect(result.current).toStrictEqual({
+      loading: false,
       locationMonitors: [
         {
           id: 'Test',
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.ts b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.ts
index 2829ccd686b5a..a05756eddffdb 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.ts
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/hooks/use_location_monitors.ts
@@ -25,7 +25,7 @@ interface AggsResponse {
 export const useLocationMonitors = () => {
   const { savedObjects } = useKibana().services;
 
-  const { data } = useFetcher(() => {
+  const { data, loading } = useFetcher(() => {
     const aggs = {
       locations: {
         terms: {
@@ -47,8 +47,8 @@ export const useLocationMonitors = () => {
         ({ key, doc_count: count }) => ({ id: key, count })
       );
 
-      return { locationMonitors: newValues };
+      return { locationMonitors: newValues, loading };
     }
-    return { locationMonitors: [] };
-  }, [data]);
+    return { locationMonitors: [], loading };
+  }, [data, loading]);
 };
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/locations_table.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/locations_table.tsx
index 51d24f4f19341..426c962e81498 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/locations_table.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/locations_table.tsx
@@ -22,7 +22,7 @@ export const PrivateLocationsTable = ({
   onDelete: (id: string) => void;
   privateLocations: PrivateLocation[];
 }) => {
-  const { locationMonitors } = useLocationMonitors();
+  const { locationMonitors, loading } = useLocationMonitors();
 
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
@@ -48,7 +48,12 @@ export const PrivateLocationsTable = ({
       name: ACTIONS_LABEL,
       align: 'right' as const,
       render: (id: string) => (
-        <DeleteLocation id={id} locationMonitors={locationMonitors} onDelete={onDelete} />
+        <DeleteLocation
+          id={id}
+          locationMonitors={locationMonitors}
+          onDelete={onDelete}
+          loading={loading}
+        />
       ),
     },
   ];