feat: add spinner

src/components/ProductForm/ProductForm.module.css

@@ -16,6 +16,9 @@
   padding: 10px;
   font-size: 1.2rem;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .button:hover {

src/components/ProductForm/index.tsx

@@ -10,12 +10,14 @@ import Header from '../Header';
 import CommentField from '../inputs/CommentField';
 import FieldWithPreviousValue from '../inputs/FieldWithPreviousValue';
 import TextField from '../inputs/TextField';
+import Spinner from '../Spinner';
 
 import styles from './ProductForm.module.css';
 
 const ProductForm: React.FC = () => {
   const { qrCodeId = null } = useParams<{ qrCodeId: string }>();
   const [qrCode, setQrCode] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const { initialValues, loadData } = useFetchFormData(qrCodeId, setQrCode);
   const { handleSubmit } = useSubmitData(setQrCode);
 
@@ -24,8 +26,10 @@ const ProductForm: React.FC = () => {
   const [isResponsibleDisabled, setIsResponsibleDisabled] = useState(isQrLoaded);
 
   const onSubmit = async (values: ProductData) => {
+    setIsLoading(true);
     await handleSubmit(values);
     if (isQrLoaded) await loadData();
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -87,7 +91,7 @@ const ProductForm: React.FC = () => {
                   previousValue={initialValues?.previousValues?.responsible}
                 />
                 <button className={styles.button} type="submit" disabled={isSubmitDisabled}>
-                  Сохранить
+                  {isLoading ? <Spinner /> : 'Сохранить'}
                 </button>
               </form>
             );

src/components/Spinner/Spinner.module.css

@@ -0,0 +1,14 @@
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #007bff;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }

src/components/Spinner/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import styles from './Spinner.module.css';
+
+const Spinner: React.FC = () => {
+  return <div className={styles.spinner}></div>;
+};
+
+export default Spinner;