@@ -15,6 +15,7 @@ function Loading({ className }) {
Loading.propTypes = {
className: PropTypes.string,
+ overlay: PropTypes.bool,
};
export default Loading;
diff --git a/components/common/Loading.module.css b/components/common/Loading.module.css
index 4e56dd8e..a69559e3 100644
--- a/components/common/Loading.module.css
+++ b/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;
}
diff --git a/components/forms/DeleteForm.js b/components/forms/DeleteForm.js
index 7fa5d6f6..09da94d6 100644
--- a/components/forms/DeleteForm.js
+++ b/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 ||
,
);
+
+ setDeleting(false);
}
};
return (
+ {deleting && }
{
- if (!(await redis.get(INITIALIZED))) {
+ if (redis && !(await redis.get(INITIALIZED))) {
await stageData();
}
})();