feat: circular progress loading component

frontend/src/pages/devices/[id].js

@@ -7,6 +7,7 @@ import { DevicesRPC } from 'src/sections/devices/devices-rpc';
 const Page = () => {
     const router = useRouter()
     const { id } = router.query
+  
 
     return(
     <>
@@ -19,7 +20,7 @@ const Page = () => {
             component="main"
             sx={{
                 flexGrow: 1,
-                py: 8,
+                py: 0,
             }}
         >
             <Container maxWidth="lg" >
@@ -28,7 +29,7 @@ const Page = () => {
                     RPC
                 </Typography>
                 {/*<SettingsNotifications />*/}
-                < DevicesRPC/>
+                < DevicesRPC />
                 </Stack>
             </Container>
         </Box>
@@ -42,4 +43,4 @@ Page.getLayout = (page) => (
     </DashboardLayout>
 );
 
-export default Page;
+export default Page;

frontend/src/sections/devices/devices-rpc.js

@@ -15,8 +15,21 @@ import {
   SvgIcon
 } from '@mui/material';
 import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon';
+import CircularProgress from '@mui/material/CircularProgress';
+import Backdrop from '@mui/material/Backdrop';
+
 
 export const DevicesRPC = () => {
+
+const [open, setOpen] = useState(false);
+
+const handleClose = () => {
+  setOpen(false);
+};
+const handleOpen = () => {
+  setOpen(true);
+};
+
   const [value, setValue] = useState(`
   {opa, 
     teste123:goiaba}`
@@ -80,10 +93,17 @@ export const DevicesRPC = () => {
         </CardContent>
         <Divider />
         <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button variant="contained" endIcon={<SvgIcon><PaperAirplane /></SvgIcon>}>
+          <Button variant="contained" endIcon={<SvgIcon><PaperAirplane /></SvgIcon>} onClick={handleOpen}>
             Send
           </Button>
         </CardActions>
+        <Backdrop
+            sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+            open={open}
+            onClick={handleClose}
+            >
+            <CircularProgress color="inherit" />
+        </Backdrop>
       </Card>
     </form>
   );