add success checkbox

frontend/src/components/InputConfig.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 type InputTextProps = {
   type: 'text' | 'number';
   name: string;
@@ -10,6 +12,9 @@ type InputTextProps = {
 };
 
 const InputConfig = ({ type, name, value, setValue, oldValue, updateCallback }: InputTextProps) => {
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (type === 'number') {
       const inputValue = e.target.value;
@@ -25,18 +30,35 @@ const InputConfig = ({ type, name, value, setValue, oldValue, updateCallback }:
     }
   };
 
+  const handleUpdate = async (name: string, value: string | boolean | number | null) => {
+    setLoading(true);
+    setSuccess(false);
+    updateCallback(name, value);
+    setLoading(false);
+    setSuccess(true);
+    setTimeout(() => setSuccess(false), 3000);
+  };
+
   return (
     <div>
       <input type={type} name={name} value={value ?? ''} onChange={handleChange} />
       <div className="button-box">
         {value !== null && value !== oldValue && (
           <>
-            <button onClick={() => updateCallback(name, value)}>Update</button>
+            <button onClick={() => handleUpdate(name, value)}>Update</button>
             {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
             <button onClick={() => setValue(oldValue as any)}>Cancel</button>
           </>
         )}
-        {oldValue !== null && <button onClick={() => updateCallback(name, null)}>reset</button>}
+        {oldValue !== null && <button onClick={() => handleUpdate(name, null)}>reset</button>}
+        {loading && (
+          <>
+            <div className="lds-ring" style={{ color: 'var(--accent-font-dark)' }}>
+              <div />
+            </div>
+          </>
+        )}
+        {success && <span>✅</span>}
       </div>
     </div>
   );