feat: deferred loadImage

src/Analysis.tsx

@@ -1,6 +1,22 @@
 import { useEffect, useState } from "react";
 import { baseUrl } from "./api";
 
+//const debounce = <T extends (...args: any[]) => void>(
+//  func: T,
+//  delay: number
+//): ((...args: Parameters<T>) => void) => {
+//  let timeoutId: number | null = null;
+//  return (...args: Parameters<T>) => {
+//    if (timeoutId !== null) {
+//      clearTimeout(timeoutId);
+//    }
+//    console.log(timeoutId);
+//    timeoutId = setTimeout(() => {
+//      func(...args);
+//    }, delay);
+//  };
+//};
+//
 interface Prop {
   name: string;
   min: string;
@@ -19,6 +35,13 @@ interface Params {
   popularity: boolean;
 }
 
+interface DeferredProps {
+  timeout: number;
+  func: () => void;
+}
+
+
+let timeoutID: number | null = null;
 export default function Analysis() {
   const [image, setImage] = useState("");
   const [params, setParams] = useState<Params>({
@@ -50,8 +73,15 @@ export default function Analysis() {
       });
   }
   useEffect(() => {
-    loadImage();
+    if (timeoutID) {
-  }, []);
+      console.log(timeoutID);
+      clearTimeout(timeoutID);
+    }
+    timeoutID = setTimeout(() => {
+      console.log("fire");
+      loadImage();
+    }, 1500);
+  }, [params]);
 
   return (
     <div className="stack column dropdown">
@@ -62,21 +92,21 @@ export default function Analysis() {
 
         <div className="control">
           <div className="checkBox">
-            <label>weighting</label>
             <input
               type="checkbox"
               checked={params.weighting}
               onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
-              onMouseUp={() => loadImage()}
+            />
-            /></div>
+            <label>weighting</label>
+          </div>
 
           <div className="checkBox">
-            <label>popularity</label>
             <input
               type="checkbox"
               checked={params.popularity}
-              onChange={(evt) => { setParams({ ...params, popularity: evt.target.checked }); loadImage() }}
+              onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
             />
+            <label>popularity</label>
           </div>
         </div>
 
@@ -89,7 +119,6 @@ export default function Analysis() {
             step="0.05"
             value={params.distance}
             onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.distance}</span></div>
 
@@ -101,7 +130,6 @@ export default function Analysis() {
             max="3000"
             value={params.nodeSize}
             onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.nodeSize}</span>
         </div>
@@ -114,7 +142,6 @@ export default function Analysis() {
             max="24"
             value={params.fontSize}
             onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.fontSize}</span>
         </div>
@@ -128,7 +155,6 @@ export default function Analysis() {
             step="0.1"
             value={params.edgeWidth}
             onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.edgeWidth}</span>
         </div>
@@ -141,7 +167,6 @@ export default function Analysis() {
             max="50"
             value={params.arrowSize}
             onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.arrowSize}</span>
         </div>

src/App.css

@@ -148,7 +148,7 @@ button {
   align-items: center;
   justify-content: center;
   border: 2px solid #404040;
-  padding: 8px;
+  padding: 8px 16px;
 }
 
 @media only screen and (max-width: 1000px) {