Merge pull request #187 from aruznieto/loading-page

feat: loading-page for suspense

Author: dec0dOS

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import "@fontsource/roboto";
 
+import { Suspense } from "react";
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 
 import Theme from "./components/Theme";
@@ -10,19 +11,25 @@ import NotFound from "./routes/NotFound";
 import Network from "./routes/Network/Network";
 import Settings from "./routes/Settings";
 
+import Loading from "./components/Loading";
+
+import "./i18n";
+
 function App() {
   return (
     <Theme>
-      <BrowserRouter basename="/app">
-        <Bar />
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/network/:nwid" component={Network} />
-          <Route path="/settings" component={Settings} />
-          <Route path="/404" component={NotFound} />
-          <Redirect to="/404" />
-        </Switch>
-      </BrowserRouter>
+      <Suspense fallback={<Loading />}>
+        <BrowserRouter basename="/app">
+          <Bar />
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route path="/network/:nwid" component={Network} />
+            <Route path="/settings" component={Settings} />
+            <Route path="/404" component={NotFound} />
+            <Redirect to="/404" />
+          </Switch>
+        </BrowserRouter>
+      </Suspense>
     </Theme>
   );
 }

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="primary" />
+      <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

@@ -1,17 +1,13 @@
 import "./index.css";
 
-import React, { Suspense } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 
 import App from "./App";
 
-import "./i18n";
-
 ReactDOM.render(
   <React.StrictMode>
-    <Suspense fallback={<div>Loading...</div>}>
-      <App />
-    </Suspense>
+    <App />
   </React.StrictMode>,
   document.getElementById("root")
 );