[Synthetics] modify use overview status hook to mimic use_monitor_list (#210936)

Resolves #197066

## Summary

Two methods explored:
- adding loading boolean to conditions that would execute quietAction to
account for renders without completed data loads
- modifying hook to mimic use_monitor_list
[here](https://github.com/baileycash-elastic/kibana/blob/main/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_list.ts)

<img width="1722" alt="Screenshot 2025-02-12 at 4 27 38 PM"
src="https://github.com/user-attachments/assets/4ca9638b-6fa6-4a1d-8818-af3232f1fdf5"
/>

## Risks
Debounce was introduced for an api call which may impact UX and data
availability in limited cases.

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { useEffect } from 'react';
+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 {
@@ -17,22 +18,51 @@ import {
 
 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) {
+        // setting false here to account for debounce timing
+        isInitialMount.current = false;
+        return;
+      }
+      dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
+    },
+    100,
+    [pageState, scopeStatusByLocation]
+  );
 
   return {
     status,