From 8b310e33e4297ed103b192f478d8f0545188be85 Mon Sep 17 00:00:00 2001
From: Bailey Cash <bailey.cash@elastic.co>
Date: Wed, 12 Feb 2025 16:22:39 -0500
Subject: [PATCH 1/2] modify use overview status hook to mimic use_monitor_list

Two methods explored:
- adding loading boolean to conditions that would execute quietAction
- modifying hook to mimic use_monitor_list
---
 .../hooks/use_overview_status.ts              | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
index da86b130af692..21f0e49d6f660 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useSyntheticsRefreshContext } from '../../../contexts/synthetics_refresh_context';
 import { selectOverviewPageState } from '../../../state';
@@ -14,25 +14,57 @@ import {
   quietFetchOverviewStatusAction,
   selectOverviewStatus,
 } from '../../../state/overview_status';
+import useDebounce from 'react-use/lib/useDebounce';
 
 export function useOverviewStatus({ scopeStatusByLocation }: { scopeStatusByLocation: boolean }) {
   const pageState = useSelector(selectOverviewPageState);
-
   const { status, error, loaded, loading, allConfigs } = useSelector(selectOverviewStatus);
+  const isInitialMount = useRef(true);
 
   const { lastRefresh } = useSyntheticsRefreshContext();
 
   const dispatch = useDispatch();
 
+  // Periodically refresh
   useEffect(() => {
-    if (loaded) {
+    if (!isInitialMount.current) {
       dispatch(quietFetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
-    } else {
-      dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
     }
-    // loaded is omitted from the dependency array because it is not used in the callback
+    // specifically only want to run this on refreshInterval change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, lastRefresh, pageState, scopeStatusByLocation]);
+  }, [lastRefresh]);
+
+  // On initial mount, load the page
+  useDebounce(
+    () => {
+      if (isInitialMount.current) {
+        if (loaded) {
+          dispatch(quietFetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
+        } else {
+          dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
+        }
+      }
+    },
+    100,
+    // we don't use pageState or scopeStatus here, for pageState, useDebounce will handle it
+    [dispatch]
+  );
+
+  useDebounce(
+    () => {
+      // Don't load on initial mount, only meant to handle pageState changes
+      if (isInitialMount.current || !loaded) {
+        if (loaded) {
+          // setting false here to account for debounce timing
+          isInitialMount.current = false;
+          return;
+        }
+        dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
+      }
+    },
+    100,
+    [pageState, scopeStatusByLocation]
+  );
 
   return {
     status,

From 2fc2ae4c898a4c33b38d36184540b5c4174df157 Mon Sep 17 00:00:00 2001
From: Bailey Cash <bailey.cash@elastic.co>
Date: Wed, 19 Feb 2025 10:34:48 -0500
Subject: [PATCH 2/2] fix debounce conditions

---
 .../monitors_page/hooks/use_overview_status.ts       | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
index 21f0e49d6f660..b6999fcc3a0b3 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
@@ -7,6 +7,7 @@
 
 import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import useDebounce from 'react-use/lib/useDebounce';
 import { useSyntheticsRefreshContext } from '../../../contexts/synthetics_refresh_context';
 import { selectOverviewPageState } from '../../../state';
 import {
@@ -14,7 +15,6 @@ import {
   quietFetchOverviewStatusAction,
   selectOverviewStatus,
 } from '../../../state/overview_status';
-import useDebounce from 'react-use/lib/useDebounce';
 
 export function useOverviewStatus({ scopeStatusByLocation }: { scopeStatusByLocation: boolean }) {
   const pageState = useSelector(selectOverviewPageState);
@@ -54,13 +54,11 @@ export function useOverviewStatus({ scopeStatusByLocation }: { scopeStatusByLoca
     () => {
       // Don't load on initial mount, only meant to handle pageState changes
       if (isInitialMount.current || !loaded) {
-        if (loaded) {
-          // setting false here to account for debounce timing
-          isInitialMount.current = false;
-          return;
-        }
-        dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
+        // setting false here to account for debounce timing
+        isInitialMount.current = false;
+        return;
       }
+      dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
     },
     100,
     [pageState, scopeStatusByLocation]