roll back bigint. add loading

components/common/Loading.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Loading.module.css';
 
-function Loading({ className }) {
+function Loading({ className, overlay = false }) {
   return (
-    <div className={classNames(styles.loading, className)}>
+    <div className={classNames(styles.loading, { [styles.overlay]: overlay }, className)}>
       <div />
       <div />
       <div />
@@ -15,6 +15,7 @@ function Loading({ className }) {
 
 Loading.propTypes = {
   className: PropTypes.string,
+  overlay: PropTypes.bool,
 };
 
 export default Loading;

components/common/Loading.module.css

@@ -21,6 +21,14 @@
   margin: 0;
 }
 
+.loading.overlay {
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background: var(--gray400);
+  opacity: 0.4;
+}
+
 .loading div {
   width: 10px;
   height: 10px;
@@ -30,6 +38,10 @@
   animation-fill-mode: both;
 }
 
+.loading.overlay div {
+  background: var(--gray900);
+}
+
 .loading div + div {
   margin-left: 10px;
 }

components/forms/DeleteForm.js

@@ -8,6 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
+import Loading from 'components/common/Loading';
 import useApi from 'hooks/useApi';
 
 const CONFIRMATION_WORD = 'DELETE';
@@ -29,8 +30,11 @@ const validate = ({ confirmation }) => {
 export default function DeleteForm({ values, onSave, onClose }) {
   const { del } = useApi();
   const [message, setMessage] = useState();
+  const [deleting, setDeleting] = useState(false);
 
   const handleSubmit = async ({ type, id }) => {
+    setDeleting(true);
+
     const { ok, data } = await del(`/${type}/${id}`);
 
     if (ok) {
@@ -39,11 +43,14 @@ export default function DeleteForm({ values, onSave, onClose }) {
       setMessage(
         data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
       );
+
+      setDeleting(false);
     }
   };
 
   return (
     <FormLayout>
+      {deleting && <Loading overlay />}
       <Formik
         initialValues={{ confirmation: '', ...values }}
         validate={validate}