diff --git a/frontend/src/components/InputConfig.tsx b/frontend/src/components/InputConfig.tsx index 5c2b1800..a378a5fb 100644 --- a/frontend/src/components/InputConfig.tsx +++ b/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) => { 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 (
{value !== null && value !== oldValue && ( <> - + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} )} - {oldValue !== null && } + {oldValue !== null && } + {loading && ( + <> +
+
+
+ + )} + {success && }
);