Stop settings spam in label settings

client/package-lock.json

@@ -18,6 +18,7 @@
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-query-devtools": "^4.36.1",
         "@types/loadable__component": "^5.13.9",
+        "@types/lodash": "^4.17.5",
         "@types/uuid": "^9.0.8",
         "@yudiel/react-qr-scanner": "^1.2.10",
         "antd": "^5.12.2",
@@ -26,6 +27,7 @@
         "i18next": "^23.11.4",
         "i18next-browser-languagedetector": "^7.2.1",
         "i18next-http-backend": "^2.5.1",
+        "lodash": "^4.17.21",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^14.1.1",
@@ -2883,6 +2885,11 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.5",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz",
+      "integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw=="
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.15",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",

client/package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@types/loadable__component": "^5.13.9",
+    "@types/lodash": "^4.17.5",
     "@types/uuid": "^9.0.8",
     "@yudiel/react-qr-scanner": "^1.2.10",
     "antd": "^5.12.2",
@@ -25,6 +26,7 @@
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "^2.5.1",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.1",

client/src/components/printing/spoolQrCodePrintingDialog.tsx

@@ -5,7 +5,7 @@ import QRCodePrintingDialog from "./qrCodePrintingDialog";
 import { useSavedState } from "../../utils/saveload";
 import { useTranslate } from "@refinedev/core";
 import { QRCodePrintSettings, SpoolQRCodePrintSettings, useGetPrintSettings, useSetPrintSettings } from "./printing";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
 import { v4 as uuidv4 } from "uuid";
 import _ from "lodash";
@@ -22,8 +22,18 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
   // Selected setting state
   const [selectedSetting, setSelectedSetting] = useState<string | undefined>();
 
-  const allPrintSettings = useGetPrintSettings();
-  const setPrintSettings = useSetPrintSettings();
+  // Keep a local copy of the settings which is what's actually displayed. Use the remote state only for saving.
+  // This decouples the debounce stuff from the UI
+  const [localSettings, setLocalSettings] = useState<SpoolQRCodePrintSettings[] | undefined>();
+  const remoteSettings = useGetPrintSettings();
+  const setRemoteSettings = useSetPrintSettings();
+  const debouncedSetRemoteSettings = useMemo(() => _.debounce(setRemoteSettings, 500), []);
+
+  const allPrintSettings = localSettings ?? remoteSettings;
+  const setPrintSettings = (newSettings: SpoolQRCodePrintSettings[]) => {
+    setLocalSettings(newSettings);
+    debouncedSetRemoteSettings(newSettings);
+  };
 
   // Functions to update settings
   const addNewPrintSettings = () => {