[8.x] [Synthetics] modify use overview status hook to mimic use_monit…

…or_list (#210936) (#211931)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Synthetics] modify use overview status hook to mimic
use_monitor_list
(#210936)](#210936)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Bailey
Cash","email":"bailey.cash@elastic.co"},"sourceCommit":{"committedDate":"2025-02-20T16:50:08Z","message":"[Synthetics]
modify use overview status hook to mimic use_monitor_list
(#210936)\n\nResolves #197066\n\n## Summary\n\nTwo methods explored:\n-
adding loading boolean to conditions that would execute quietAction
to\naccount for renders without completed data loads\n- modifying hook
to mimic
use_monitor_list\n[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)\n\n<img
width=\"1722\" alt=\"Screenshot 2025-02-12 at 4 27
38 PM\"\nsrc=\"https://github.com/user-attachments/assets/4ca9638b-6fa6-4a1d-8818-af3232f1fdf5\"\n/>\n\n##
Risks\nDebounce was introduced for an api call which may impact UX and
data\navailability in limited
cases.","sha":"258eef7e37745a63256fdc56b32b21e3b103ec2a","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","Team:obs-ux-management","v9.1.0","v8.19.0"],"title":"[Synthetics]
modify use overview status hook to mimic
use_monitor_list","number":210936,"url":"https://github.com/elastic/kibana/pull/210936","mergeCommit":{"message":"[Synthetics]
modify use overview status hook to mimic use_monitor_list
(#210936)\n\nResolves #197066\n\n## Summary\n\nTwo methods explored:\n-
adding loading boolean to conditions that would execute quietAction
to\naccount for renders without completed data loads\n- modifying hook
to mimic
use_monitor_list\n[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)\n\n<img
width=\"1722\" alt=\"Screenshot 2025-02-12 at 4 27
38 PM\"\nsrc=\"https://github.com/user-attachments/assets/4ca9638b-6fa6-4a1d-8818-af3232f1fdf5\"\n/>\n\n##
Risks\nDebounce was introduced for an api call which may impact UX and
data\navailability in limited
cases.","sha":"258eef7e37745a63256fdc56b32b21e3b103ec2a"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210936","number":210936,"mergeCommit":{"message":"[Synthetics]
modify use overview status hook to mimic use_monitor_list
(#210936)\n\nResolves #197066\n\n## Summary\n\nTwo methods explored:\n-
adding loading boolean to conditions that would execute quietAction
to\naccount for renders without completed data loads\n- modifying hook
to mimic
use_monitor_list\n[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)\n\n<img
width=\"1722\" alt=\"Screenshot 2025-02-12 at 4 27
38 PM\"\nsrc=\"https://github.com/user-attachments/assets/4ca9638b-6fa6-4a1d-8818-af3232f1fdf5\"\n/>\n\n##
Risks\nDebounce was introduced for an api call which may impact UX and
data\navailability in limited
cases.","sha":"258eef7e37745a63256fdc56b32b21e3b103ec2a"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Bailey Cash <bailey.cash@elastic.co>

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,