Reduce Safari errors while setting URLs in iframes (#60)

neesjanvaneck · Jan 30, 2024 · 678d63b · 678d63b
1 parent 001f114
commit 678d63b
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/components/ui/URLPanel/index.js b/src/components/ui/URLPanel/index.js
@@ -1,6 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { CardMedia, Paper } from '@mui/material';
+import _throttle from 'lodash/throttle';
 
 import { ConfigStoreContext, VisualizationStoreContext } from 'store/stores';
 import * as s from './styles';
@@ -10,13 +11,18 @@ const URLPanel = observer(() => {
   const visualizationStore = useContext(VisualizationStoreContext);
   const [url, setUrl] = useState(undefined);
 
+  const throttledSetUrl = useCallback(_throttle((value) => {
+    setUrl(value);
+  }, 1000), []);
+
+
   useEffect(() => {
     const { hoveredItem, clickedItem, hoveredLink, clickedLink } = visualizationStore;
     if (clickedItem || clickedLink) {
-      setUrl((clickedItem && clickedItem.url) || (clickedLink && clickedLink.url));
+      throttledSetUrl((clickedItem && clickedItem.url) || (clickedLink && clickedLink.url));
     } else if (hoveredItem || hoveredLink) {
-      setUrl((hoveredItem && hoveredItem.url) || (hoveredLink && hoveredLink.url));
-    } else setUrl(undefined);
+      throttledSetUrl((hoveredItem && hoveredItem.url) || (hoveredLink && hoveredLink.url));
+    } else throttledSetUrl(undefined);
   }, [visualizationStore.hoveredItem, visualizationStore.clickedItem, visualizationStore.hoveredLink, visualizationStore.clickedLink]);
 
   return (