feat: circular progress loading component

This commit is contained in:
Leandro Farias 2023-04-20 14:46:53 +00:00
parent 7c40982a00
commit 2d7da446fc
2 changed files with 25 additions and 4 deletions

View File

@ -8,6 +8,7 @@ const Page = () => {
const router = useRouter()
const { id } = router.query
return(
<>
<Head>
@ -19,7 +20,7 @@ const Page = () => {
component="main"
sx={{
flexGrow: 1,
py: 8,
py: 0,
}}
>
<Container maxWidth="lg" >

View File

@ -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>
);