@@ -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/common/UpdateNotice.js b/components/common/UpdateNotice.js
index 8bba1694..7419abe8 100644
--- a/components/common/UpdateNotice.js
+++ b/components/common/UpdateNotice.js
@@ -1,8 +1,8 @@
import { useState, useEffect, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
+import { setItem } from 'next-basics';
import ButtonLayout from 'components/layout/ButtonLayout';
import useStore, { checkVersion } from 'store/version';
-import { setItem } from 'lib/web';
import { REPO_URL, VERSION_CHECK } from 'lib/constants';
import Button from './Button';
import styles from './UpdateNotice.module.css';
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 && }
{children} ;
}
diff --git a/components/metrics/FilterTags.js b/components/metrics/FilterTags.js
index 5b8ed63c..be65540e 100644
--- a/components/metrics/FilterTags.js
+++ b/components/metrics/FilterTags.js
@@ -1,8 +1,8 @@
import React from 'react';
import classNames from 'classnames';
+import { safeDecodeURI } from 'next-basics';
import Button from 'components/common/Button';
import Times from 'assets/times.svg';
-import { safeDecodeURI } from 'lib/url';
import styles from './FilterTags.module.css';
export default function FilterTags({ params, onClick }) {
diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js
index 429a37d6..eb16904c 100644
--- a/components/metrics/MetricCard.js
+++ b/components/metrics/MetricCard.js
@@ -29,9 +29,9 @@ const MetricCard = ({
: !reverseColors
? styles.negative
: styles.positive
- }`}
+ } ${change >= 0 ? styles.plusSign : ''}`}
>
- {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+ {changeProps.x.interpolate(x => format(x))}
)}