Fix infinite loop issue in Map panel

ShortestPathLab · May 22, 2024 · ddb9854 · ddb9854
1 parent bba6fcb
commit ddb9854
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 23 deletions.
diff --git a/client/src/hooks/useDebouncedState.tsx b/client/src/hooks/useDebouncedState.tsx
@@ -1,5 +1,5 @@
-import { delay, noop } from "lodash";
-import { useState } from "react";
+import { delay, noop, now } from "lodash";
+import { useRef, useState } from "react";
 import { useEffectWhen } from "./useEffectWhen";
 
 export function useDebouncedState<T>(
@@ -8,15 +8,21 @@ export function useDebouncedState<T>(
   wait: number = 300
 ) {
   const [state, setState] = useState(defaultValue);
-  useEffectWhen(
-    () => {
-      const timeout = delay(() => {
-        onChange(state);
-      }, wait);
-      return () => clearTimeout(timeout);
+  const head = useRef(now());
+  return [
+    state,
+    (a: any) => {
+      const commit = now();
+      requestIdleCallback(
+        () => {
+          if (commit > head.current) {
+            onChange?.(a);
+            head.current = commit;
+          }
+        },
+        { timeout: 300 }
+      );
+      setState(a);
     },
-    [state, onChange, wait],
-    [state]
-  );
-  return [state, setState] as const;
+  ] as const;
 }
diff --git a/client/src/hooks/useMapOptions.tsx b/client/src/hooks/useMapOptions.tsx
@@ -8,5 +8,5 @@ export function useMapOptions(map?: Map) {
   const { format } = map ?? {};
   return useAsync(async () => {
     return (await getParser(format)?.editor?.(map?.content)) ?? noop;
-  }, [map]);
+  }, [format, map?.content]);
 }
diff --git a/client/src/hooks/useParsedMap.tsx b/client/src/hooks/useParsedMap.tsx
@@ -29,7 +29,7 @@ export function useParsedMap(map?: Map, options?: Record<string, any>) {
               "Map loaded",
               `${parsedMap.nodes.length} elements, ${parsedMap.log.join(", ")}`
             );
-            return parsedMap;
+            return { ...map, ...parsedMap };
           } catch (e) {
             console.error(e);
             notify("Error parsing", get(e, "message"));

diff --git a/client/src/layers/map/index.tsx b/client/src/layers/map/index.tsx
@@ -75,8 +75,8 @@ export const controller = {
         }
       : { claimed: false },
   editor: withProduce(({ value, produce }) => {
-    const { result: mapContent } = useMapContent(value?.source?.map);
-    const { result: Editor } = useMapOptions(mapContent);
+    const parsedMap = value?.source?.parsedMap;
+    const { result: Editor } = useMapOptions(parsedMap);
     return (
       <>
         <Option
@@ -143,17 +143,20 @@ export const controller = {
   },
   service: withProduce(({ value, produce }) => {
     const { result: mapContent } = useMapContent(value?.source?.map);
-    const { result: parsedMap } = useParsedMap(
+    const { result: parsedMap, loading } = useParsedMap(
       mapContent,
       value?.source?.options
     );
     useEffectWhen(
-      () =>
-        void produce((v) => {
-          set(v, "source.parsedMap", parsedMap);
-          set(v, "viewKey", id());
-        }),
-      [parsedMap, produce],
+      () => {
+        if (!loading) {
+          void produce((v) => {
+            set(v, "source.parsedMap", parsedMap);
+            set(v, "viewKey", id());
+          });
+        }
+      },
+      [parsedMap, produce, loading],
       [parsedMap]
     );
     return <></>;