From b8a5a37fc7e15d5f9a7a167438a2e22ec6c07d90 Mon Sep 17 00:00:00 2001
From: Andres <ruznietoa@gmail.com>
Date: Fri, 20 Oct 2023 10:47:19 +0200
Subject: [PATCH 1/2] feat: loading-page for suspense

---
 frontend/src/components/Loading/Loading.jsx   | 19 +++++++++++
 .../src/components/Loading/Loading.styles.jsx | 32 +++++++++++++++++++
 frontend/src/components/Loading/index.jsx     |  1 +
 .../components/NetworkRules/NetworkRules.jsx  |  2 +-
 frontend/src/index.jsx                        |  3 +-
 5 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Loading/Loading.jsx
 create mode 100644 frontend/src/components/Loading/Loading.styles.jsx
 create mode 100644 frontend/src/components/Loading/index.jsx

diff --git a/frontend/src/components/Loading/Loading.jsx b/frontend/src/components/Loading/Loading.jsx
new file mode 100644
index 0000000..a197665
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/Loading/Loading.styles.jsx b/frontend/src/components/Loading/Loading.styles.jsx
new file mode 100644
index 0000000..1f7a966
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/Loading/index.jsx b/frontend/src/components/Loading/index.jsx
new file mode 100644
index 0000000..1521242
--- /dev/null
+++ b/frontend/src/components/Loading/index.jsx
@@ -0,0 +1 @@
+export { default } from "./Loading.jsx";
diff --git a/frontend/src/components/NetworkRules/NetworkRules.jsx b/frontend/src/components/NetworkRules/NetworkRules.jsx
index 5321748..e6f57bd 100644
--- a/frontend/src/components/NetworkRules/NetworkRules.jsx
+++ b/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();
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index e79267e..fcc4df5 100644
--- a/frontend/src/index.jsx
+++ b/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>,

From 5be92007b7cd376719fa2d4929c84132315b2bac Mon Sep 17 00:00:00 2001
From: dec0dOS <alex.potapov21@gmail.com>
Date: Fri, 20 Oct 2023 18:00:33 +0100
Subject: [PATCH 2/2] fix: apply theme before showing the loading screen

---
 frontend/src/App.jsx                        | 27 +++++++++++++--------
 frontend/src/components/Loading/Loading.jsx |  2 +-
 frontend/src/index.jsx                      |  9 ++-----
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9142994..e8bd257 100644
--- a/frontend/src/App.jsx
+++ b/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>
   );
 }
diff --git a/frontend/src/components/Loading/Loading.jsx b/frontend/src/components/Loading/Loading.jsx
index a197665..7122fe7 100644
--- a/frontend/src/components/Loading/Loading.jsx
+++ b/frontend/src/components/Loading/Loading.jsx
@@ -7,7 +7,7 @@ function Loading() {
 
   return (
     <div className={classes.root}>
-      <CircularProgress color="secondary" />
+      <CircularProgress color="primary" />
       <Typography variant="h6" component="div" className={classes.loadingText}>
         Loading
         <span className="loadingDots"></span>
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index fcc4df5..3c94589 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,18 +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";
-import Loading from "components/Loading";
-
 ReactDOM.render(
   <React.StrictMode>
-    <Suspense fallback={<Loading />}>
-      <App />
-    </Suspense>
+    <App />
   </React.StrictMode>,
   document.getElementById("root")
 );