[8.6] [Synthetics UI] Fix infinite scroll in overview page (#146570) (#…

…146657) # Backport This will backport the following commits from `main` to `8.6`: - [[Synthetics UI] Fix infinite scroll in overview page (#146570)](#146570)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Alejandro Fernández Gómez <alejandro.fernandez@elastic.co>
elastic · Nov 30, 2022 · 5c2f7e9 · 5c2f7e9
1 parent b1406b8
commit 5c2f7e9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 38 deletions.
diff --git a/...etics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx b/...etics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
@@ -132,9 +132,9 @@ export const OverviewGrid = memo(() => {
       ) : (
         <OverviewLoader />
       )}
-      <span ref={intersectionRef}>
+      <div ref={intersectionRef}>
         <EuiSpacer size="l" />
-      </span>
+      </div>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         {currentMonitors.length === monitors.length && (
           <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { useEffect, useMemo, useState, useRef } from 'react';
-import { isEqual } from 'lodash';
+import { useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { MonitorOverviewItem } from '../../../../common/runtime_types';
 import { selectOverviewState } from '../state/overview';
@@ -20,17 +19,19 @@ export function useMonitorsSortedByStatus() {
     data: { monitors },
     status,
   } = useSelector(selectOverviewState);
-  const [monitorsSortedByStatus, setMonitorsSortedByStatus] = useState<
-    Record<string, MonitorOverviewItem[]>
-  >({ up: [], down: [], disabled: [] });
+
   const downMonitors = useRef<Record<string, string[]> | null>(null);
-  const currentMonitors = useRef<MonitorOverviewItem[] | null>(monitors);
   const locationNames = useLocationNames();
 
-  useEffect(() => {
+  const monitorsSortedByStatus = useMemo(() => {
     if (!status) {
-      return;
+      return {
+        down: [],
+        up: [],
+        disabled: [],
+      };
     }
+
     const { downConfigs } = status;
     const downMonitorMap: Record<string, string[]> = {};
     downConfigs.forEach(({ location, configId }) => {
@@ -41,34 +42,30 @@ export function useMonitorsSortedByStatus() {
       }
     });
 
-    if (
-      !isEqual(downMonitorMap, downMonitors.current) ||
-      !isEqual(monitors, currentMonitors.current)
-    ) {
-      const orderedDownMonitors: MonitorOverviewItem[] = [];
-      const orderedUpMonitors: MonitorOverviewItem[] = [];
-      const orderedDisabledMonitors: MonitorOverviewItem[] = [];
-      monitors.forEach((monitor) => {
-        const monitorLocation = locationNames[monitor.location.id];
-        if (!monitor.isEnabled) {
-          orderedDisabledMonitors.push(monitor);
-        } else if (
-          Object.keys(downMonitorMap).includes(monitor.id) &&
-          downMonitorMap[monitor.id].includes(monitorLocation)
-        ) {
-          orderedDownMonitors.push(monitor);
-        } else {
-          orderedUpMonitors.push(monitor);
-        }
-      });
-      downMonitors.current = downMonitorMap;
-      currentMonitors.current = monitors;
-      setMonitorsSortedByStatus({
-        down: orderedDownMonitors,
-        up: orderedUpMonitors,
-        disabled: orderedDisabledMonitors,
-      });
-    }
+    const orderedDownMonitors: MonitorOverviewItem[] = [];
+    const orderedUpMonitors: MonitorOverviewItem[] = [];
+    const orderedDisabledMonitors: MonitorOverviewItem[] = [];
+
+    monitors.forEach((monitor) => {
+      const monitorLocation = locationNames[monitor.location.id];
+      if (!monitor.isEnabled) {
+        orderedDisabledMonitors.push(monitor);
+      } else if (
+        monitor.id in downMonitorMap &&
+        downMonitorMap[monitor.id].includes(monitorLocation)
+      ) {
+        orderedDownMonitors.push(monitor);
+      } else {
+        orderedUpMonitors.push(monitor);
+      }
+    });
+    downMonitors.current = downMonitorMap;
+
+    return {
+      down: orderedDownMonitors,
+      up: orderedUpMonitors,
+      disabled: orderedDisabledMonitors,
+    };
   }, [monitors, locationNames, downMonitors, status]);
 
   return useMemo(() => {