Throttle the container.tsx pipeline processing function

src/config.ts

@@ -36,6 +36,8 @@ export interface Config {
   /** to parse a HTML table and load the data */
   from: HTMLElement;
   storage: Storage<any>;
+  /** Pipeline process throttle timeout in milliseconds */
+  processingThrottleMs: number;
   pipeline: Pipeline<Tabular>;
   /** to automatically calculate the columns width */
   autoWidth: boolean;
@@ -128,6 +130,7 @@ export class Config {
       tableRef: createRef(),
       width: '100%',
       height: 'auto',
+      processingThrottleMs: 50,
       autoWidth: true,
       style: {},
       className: {},

src/util/throttle.ts

@@ -1,11 +1,20 @@
-export const throttle = (fn: (...args) => void, wait = 100) => {
+/**
+ * Throttle a given function
+ * @param fn Function to be called
+ * @param wait Throttle timeout in milliseconds
+ * @param leading whether or not to call "fn" immediately
+ * @returns Throttled function
+ */
+export const throttle = (fn: (...args) => void, wait = 100, leading = true) => {
   let inThrottle: boolean;
   let lastFn: ReturnType<typeof setTimeout>;
   let lastTime: number;
 
   return (...args) => {
     if (!inThrottle) {
-      fn(...args);
+      if (leading) {
+        fn(...args);
+      }
       lastTime = Date.now();
       inThrottle = true;
     } else {

src/view/container.tsx

@@ -10,6 +10,7 @@ import * as actions from './actions';
 import { useStore } from '../hooks/useStore';
 import useSelector from '../../src/hooks/useSelector';
 import { useConfig } from '../../src/hooks/useConfig';
+import { throttle } from 'src/util/throttle';
 
 export function Container() {
   const config = useConfig();
@@ -19,6 +20,23 @@ export function Container() {
   const tableRef = useSelector((state) => state.tableRef);
   const tempRef = createRef();
 
+  const processPipeline = throttle(async () => {
+    dispatch(actions.SetLoadingData());
+
+    try {
+      const data = await config.pipeline.process();
+      dispatch(actions.SetData(data));
+
+      // TODO: do we need this setTimemout?
+      setTimeout(() => {
+        dispatch(actions.SetStatusToRendered());
+      }, 0);
+    } catch (e) {
+      log.error(e);
+      dispatch(actions.SetDataErrored());
+    }
+  }, config.processingThrottleMs, false);
+
   useEffect(() => {
     // set the initial header object
     // we update the header width later when "data"
@@ -41,23 +59,6 @@ export function Container() {
     }
   }, [data, config, tempRef]);
 
-  const processPipeline = async () => {
-    dispatch(actions.SetLoadingData());
-
-    try {
-      const data = await config.pipeline.process();
-      dispatch(actions.SetData(data));
-
-      // TODO: do we need this setTimemout?
-      setTimeout(() => {
-        dispatch(actions.SetStatusToRendered());
-      }, 0);
-    } catch (e) {
-      log.error(e);
-      dispatch(actions.SetDataErrored());
-    }
-  };
-
   return (
     <div
       role="complementary"