fix: Cluster overview resize problems (kyma-project#4349)

* fix: Cluster overview resize problems

* little cleanup

* little cleanup

Author: mrCherry97

src/components/Extensibility/ExtensibilityInjections.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ExtensibilityErrBoundary } from 'components/Extensibility/ExtensibilityErrBoundary';
 import { useGetSchema } from 'hooks/useGetSchema';
 
@@ -43,23 +43,39 @@ export function ExtensibilityInjectionCore({ resMetaData, root }) {
   const filter = injection?.target.filter || injection?.filter || null;
   const items = data?.items || [];
 
+  const stableFilter = useMemo(() => filter, [filter]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableItems = useMemo(() => [...items], [items.length]);
+  const stableRoot = useMemo(() => root, [root]);
+
   useEffect(() => {
-    if (!resource && !isStatic) {
-      return;
-    }
-    Promise.all(
-      items.map(async (item) => {
-        if (filter) {
-          const [value] = await jsonata(filter, { item, root });
-          return value ? item : false;
-        }
-        return item;
-      }),
-    ).then((results) => {
-      setFilteredItems(results.filter(Boolean));
-    });
+    if (!resource && !isStatic) return;
+
+    let canceled = false;
+
+    const run = async () => {
+      const results = await Promise.all(
+        stableItems.map(async (item) => {
+          if (stableFilter) {
+            const [value] = await jsonata(stableFilter, {
+              item,
+              root: stableRoot,
+            });
+            return value ? item : false;
+          }
+          return item;
+        }),
+      );
+
+      if (!canceled) setFilteredItems(results.filter(Boolean));
+    };
+
+    run();
+    return () => {
+      canceled = true;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resource, isStatic, filter, JSON.stringify(items)]);
+  }, [resource, isStatic, stableFilter, stableItems, stableRoot]);
 
   if (loading && !data) {
     return null;

src/components/Extensibility/components/Widget.jsx

@@ -148,33 +148,47 @@ export function Widget({
   const [visible, setVisible] = useState(true);
   const [visibilityError, setVisibilityError] = useState(null);
 
+  const stableStructure = useMemo(
+    () => structure,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [structure?.source, structure?.visibility],
+  );
+  const stableIndex = useMemo(() => index, [index]);
+  const stableValue = useMemo(() => value, [value]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableArrayItems = useMemo(() => arrayItems, [arrayItems?.length]);
+
   useEffect(() => {
+    let canceled = false;
+
     const setStatesFromJsonata = async () => {
-      const [evaluatedChildValue] = await jsonata(structure.source, {
-        index: index,
+      const [evaluatedChildValue] = await jsonata(stableStructure.source, {
+        index: stableIndex,
       });
       const [result, error] = await jsonata(
-        structure.visibility?.toString(),
-        {
-          value: evaluatedChildValue,
-        },
+        stableStructure.visibility?.toString(),
+        { value: evaluatedChildValue },
         true,
       );
+      if (canceled) return;
       setChildValue(evaluatedChildValue);
       setVisible(result);
       setVisibilityError(error);
     };
+
     setStatesFromJsonata();
+    return () => {
+      canceled = true;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    structure.source,
-    index,
-    structure.visibility,
+    stableStructure,
+    stableIndex,
+    stableValue,
+    stableArrayItems,
     originalResource,
     singleRootResource,
     embedResource,
-    value,
-    arrayItems,
   ]);
 
   if (visibilityError) {