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;
 }