add debounce for qr input

components/shared/qr.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Suspense, useEffect, useState } from "react";
+import { Suspense, useCallback, useEffect, useState } from "react";
 import Link from "next/link";
+import { debounce } from "lodash";
 import { HexColorPicker } from "react-colorful";
 import { toast } from "sonner";
 
@@ -64,9 +65,12 @@ export default function QRCodeEditor({
     setQrCodeUrl(generateQrCodeUrl());
   }, [params]);
 
-  const handleColorChange = (color: string, type: "fgColor" | "bgColor") => {
-    setParams((prev) => ({ ...prev, [type]: color }));
-  };
+  const handleColorChange = useCallback(
+    debounce((color: string, type: "fgColor" | "bgColor") => {
+      setParams((prev) => ({ ...prev, [type]: color }));
+    }, 300),
+    [],
+  );
 
   const handleToggleLogo = (v: boolean) => {
     setParams((prev) => ({ ...prev, hideLogo: !v }));
@@ -83,6 +87,19 @@ export default function QRCodeEditor({
     toast.success("Copied to clipboard");
   };
 
+  const handleChangeUrl = useCallback(
+    debounce((value) => {
+      setParams((prev) => ({ ...prev, url: value }));
+    }, 300),
+    [],
+  );
+  const handleChangeLogo = useCallback(
+    debounce((value) => {
+      setParams((prev) => ({ ...prev, logo: value }));
+    }, 300),
+    [],
+  );
+
   const colorOptions = [
     "#000000", // Black
     "#c73e33", // Red-orange
@@ -153,15 +170,12 @@ export default function QRCodeEditor({
         <h3 className="text-nowrap text-sm font-semibold text-neutral-600 transition-all group-hover:ml-1 group-hover:font-bold dark:text-neutral-300">
           Url
         </h3>
-
         <Input
           className="ml-auto w-[60%]"
           type="text"
           placeholder="https://example.com"
           defaultValue={params.url}
-          onChange={(e) => {
-            setParams((prev) => ({ ...prev, url: e.target.value }));
-          }}
+          onChange={(e) => handleChangeUrl(e.target.value)}
         />
       </div>
 
@@ -225,9 +239,7 @@ export default function QRCodeEditor({
             placeholder="https://example.com/logo.png"
             disabled={params.hideLogo}
             defaultValue={WRDO_QR_LOGO}
-            onChange={(e) => {
-              setParams((prev) => ({ ...prev, logo: e.target.value }));
-            }}
+            onChange={(e) => handleChangeLogo(e.target.value)}
           />
         </details>
       </div>

package.json

@@ -70,6 +70,7 @@
     "crypto": "^1.0.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^12.5.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.414.0",
     "lucide-static": "^0.460.0",
     "minimist": "^1.2.8",
@@ -111,6 +112,7 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.13",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^20.14.11",
     "@types/qrcode": "^1.5.5",
     "@types/react": "18.3.3",

pnpm-lock.yaml

@@ -164,6 +164,9 @@ importers:
       framer-motion:
         specifier: ^12.5.0
         version: 12.5.0(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lucide-react:
         specifier: ^0.414.0
         version: 0.414.0(react@18.3.1)
@@ -282,6 +285,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.13
         version: 0.5.13(tailwindcss@3.4.6)
+      '@types/lodash':
+        specifier: ^4.17.16
+        version: 4.17.16
       '@types/node':
         specifier: ^20.14.11
         version: 20.14.11
@@ -3151,6 +3157,9 @@ packages:
   '@types/leaflet@1.7.6':
     resolution: {integrity: sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==}
 
+  '@types/lodash@4.17.16':
+    resolution: {integrity: sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==}
+
   '@types/mapbox__point-geometry@0.1.4':
     resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
 
@@ -10772,6 +10781,8 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.14
 
+  '@types/lodash@4.17.16': {}
+
   '@types/mapbox__point-geometry@0.1.4': {}
 
   '@types/mapbox__vector-tile@1.3.4':