update with mutation nice

src/App.css

   background-color: var(--main);
   color: white;
 }
+.loadingGeneric{
+    height: 100vh;
+    display: flex;
+    align-content: center;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+}

src/Components/Generics/loading.jsx

 import React from "react";
 import '../../Css/loading.css'
 
-import { Paper, Box } from '@mui/material'
+import { Box, Paper } from '@mui/material'
 
 export function Loading() {
 
 
   return (
     <div className="content-section">
+      <Paper>
       <div className="main">
-        <Box>
-          <Paper sx={{ mb: 2, padding: 2, }}>
+        <Box className="loadingGeneric">
 
-            <div className="content-section">
               <div className="loading_or_content">
                 <div className="snippet" data-title=".dot-pulse">
                   <div className="stage">
                   </div>
                 </div>
               </div>
-            </div>
 
-          </Paper>
         </Box>
       </div>
+      </Paper>
     </div>
 
   )

src/Components/Modal/EditPlaza.js

-import React, { memo, useMemo, useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { Modal } from 'react-bootstrap'
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from '@hookform/resolvers/yup';
   });
 
   const onSubmit = data => {
-    console.log("SUBMIT: ",data)
+
+    let body = {
+      ...data,
+      fecha : new Date(data.fecha).toISOString()
+    }
+
+    puestoMutation.mutate(body, {
+      onSuccess: () => {
+        close();
+        setOpen(false)
+        toast.success("Puesto Actualizado!!")
+        queryClient.invalidateQueries('puestos')
+      },
+      onError:() => {
+        close();
+        setOpen(false)
+        toast.error("Lo sentimos ocurrió error inténtalo más tarde")
+      }
+    })
+
   }
 
-  const now = useMemo(() => new Date(), [])
   const auth = useSelector((state) => state.token)
-  // const queryClient = useQueryClient()
+  const queryClient = useQueryClient()
   let { visible, toggle } = props
 
   const [open, setOpen] = React.useState(false);
     }
     setChecklist(temp.map( test => test.id) )
     setValue('tests', temp)
-    // setValue({...values, tests: temp})
   };
 
   const getCategories = async () => {
         reset({...response.data, areadepto : areadeptoplz_id, fecha : new Date(fecha) , tests : temp_test  })
       })
       .catch(console.log)
-  },[visible])
+  },[visible, auth,reset])
 
   const changeTab = (_event, newValue) => setTab(newValue);
 

src/Pages/Puestos.jsx

     }
   }, [edit, del, show])
 
+
   if(isLoading){
     return(
       <Loading/>
     )
   }
 
-  /*
-  if (isLoading) {
-    return (
-      <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
-        <main id="loading_or_content">
-          <Loading />
-        </main>
-      </Paper>
-    )
-  }
-
   if (error) {
     return (
       <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
       </Paper>
     )
   }
-    */
-
   const total_items = Divide(result.data).length
 
   return (