chore: un-nest components (#1090)

Closes #936.

site/src/components/LoadingButton/LoadingButton.tsx

@@ -0,0 +1,45 @@
+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,
+  },
+}))