feat: loading-page for suspense

Author: aruznieto

frontend/src/components/Loading/Loading.jsx

@@ -0,0 +1,19 @@
+import { Typography, Box, CircularProgress } from "@material-ui/core";
+
+import useStyles from "./Loading.styles";
+
+function Loading() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <CircularProgress color="secondary" />
+      <Typography variant="h6" component="div" className={classes.loadingText}>
+        Loading
+        <span className="loadingDots"></span>
+      </Typography>
+    </div>
+  );
+}
+
+export default Loading;

frontend/src/components/Loading/Loading.styles.jsx

@@ -0,0 +1,32 @@
+// Loading.styles.jsx
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+  },
+  loadingText: {
+    marginTop: "16px",
+    position: "relative",
+    "& .loadingDots::after": {
+      content: '"."',
+      position: "absolute",
+      left: "100%",
+      marginLeft: "4px",
+      animation: "$loadingDots 1s infinite",
+    },
+  },
+  "@keyframes loadingDots": {
+    "0%": { content: '"."' },
+    "25%": { content: '".."' },
+    "50%": { content: '"..."' },
+    "75%": { content: '"...."' },
+    "100%": { content: '"."' },
+  },
+});
+
+export default useStyles;

frontend/src/components/Loading/index.jsx

@@ -0,0 +1 @@
+export { default } from "./Loading.jsx";

frontend/src/components/NetworkRules/NetworkRules.jsx

@@ -17,7 +17,7 @@ import debounce from "lodash/debounce";
 import { useState } from "react";
 import API from "utils/API";
 
-import { useTranslation, Trans } from "react-i18next";
+import { useTranslation } from "react-i18next";
 
 function NetworkRules({ network, callback }) {
   const { t, i18n } = useTranslation();

frontend/src/index.jsx

@@ -6,10 +6,11 @@ import ReactDOM from "react-dom";
 import App from "./App";
 
 import "./i18n";
+import Loading from "components/Loading";
 
 ReactDOM.render(
   <React.StrictMode>
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<Loading />}>
       <App />
     </Suspense>
   </React.StrictMode>,