fix: throttle event listener function (#705)

* fix: debounce event listener function

* fix: use existing debounce function

* feat: add throttle function

* refactor: substitue helper functions with lodash's

---------

Co-authored-by: Lam Tang <tangyenan@gmail.com>

package.json

@@ -31,6 +31,7 @@
     "element-ready": "^6.2.1",
     "github-url-detection": "^6.1.0",
     "jquery": "^3.6.0",
+    "lodash-es": "^4.17.21",
     "office-ui-fabric-react": "^7.183.0",
     "react": "^17.0.2",
     "react-chat-widget": "^3.1.4",
@@ -49,6 +50,7 @@
     "@types/firefox-webext-browser": "^94.0.1",
     "@types/jest": "^27.4.0",
     "@types/jquery": "^3.5.13",
+    "@types/lodash-es": "^4.17.8",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-modal": "^3.13.1",
@@ -64,7 +66,6 @@
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
-    "lodash-es": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.2",
     "mkdirp": "^1.0.4",
     "prettier": "^2.7.1",

src/components/Graph.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties, useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 
 import linearMap from '../helpers/linear-map';
-import debounce from '../helpers/debounce';
+import { debounce } from 'lodash-es';
 
 interface GraphProps {
   /**
@@ -123,7 +123,7 @@ const Graph: React.FC<GraphProps> = ({ data, style = {}, focusedNodeID }) => {
         window.location.href = url;
       });
 
-      const [debouncedResize, teardown] = debounce(() => {
+      const debouncedResize = debounce(() => {
         instance.resize();
       }, 500);
       window.addEventListener('resize', debouncedResize);

src/feature-manager.ts

@@ -11,6 +11,7 @@ import shouldFeatureRun, {
   ShouldRunConditions,
 } from './helpers/should-feature-run';
 import optionsStorage from './options-storage';
+import { throttle } from 'lodash-es';
 
 type FeatureInit = () => Promisable<void>;
 type FeatureRestore = Function;
@@ -176,12 +177,7 @@ const add = async (
       setupPageLoad(id, details);
     }
 
-    /**
-     * Features are targeted to different GitHub pages, so they will not be all loaded at once.
-     * They should be loaded as needed, however, `add()` only runs once for each feature. So
-     * how to load features after a turbo:visit? The answer is to make use of turbo events.
-     */
-    document.addEventListener('turbo:render', async () => {
+    const throttledHandler = throttle(async () => {
       if (isRestorationVisit()) {
         /** After experiments I believe turbo:render is fired after the render starts but not
          * after a render ends. So we need to wait for a while to make sure the DOM tree is
@@ -202,7 +198,14 @@ const add = async (
           restore();
         }
       }
-    });
+    }, 200);
+
+    /**
+     * Features are targeted to different GitHub pages, so they will not be all loaded at once.
+     * They should be loaded as needed, however, `add()` only runs once for each feature. So
+     * how to load features after a turbo:visit? The answer is to make use of turbo events.
+     */
+    document.addEventListener('turbo:render', throttledHandler);
   }
 };
 

yarn.lock

@@ -1559,6 +1559,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash-es@^4.17.8":
+  version "4.17.8"
+  resolved "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.8.tgz#cfffd0969507830c22da18dbb20d2ca126fdaa8b"
+  integrity sha512-euY3XQcZmIzSy7YH5+Unb3b2X12Wtk54YWINBvvGQ5SmMvwb11JQskGsfkH/5HXK77Kr8GF0wkVDIxzAisWtog==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.195"
+  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"