Files
coder/site/src/components/LoadingButton/LoadingButton.tsx
2022-04-19 14:16:11 -05:00

46 lines
1.3 KiB
TypeScript

import Button, { ButtonProps } from "@material-ui/core/Button"
import CircularProgress from "@material-ui/core/CircularProgress"
import { makeStyles } from "@material-ui/core/styles"
import * as React from "react"
export interface LoadingButtonProps extends ButtonProps {
/** Whether or not to disable the button and show a spinner */
loading?: boolean
}
/**
* LoadingButton is a small wrapper around Material-UI's button to show a loading spinner
*
* In Material-UI 5+ - this is built-in, but since we're on an earlier version,
* we have to roll our own.
*/
export const LoadingButton: React.FC<LoadingButtonProps> = ({ loading = false, children, ...rest }) => {
const styles = useStyles()
const hidden = loading ? { opacity: 0 } : undefined
return (
<Button {...rest} disabled={rest.disabled || loading}>
<span style={hidden}>{children}</span>
{loading && (
<div className={styles.loader}>
<CircularProgress size={18} className={styles.spinner} />
</div>
)}
</Button>
)
}
const useStyles = makeStyles((theme) => ({
loader: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
height: 18,
width: 18,
},
spinner: {
color: theme.palette.text.disabled,
},
}))