fix: apply theme before showing the loading screen

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

@@ -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>

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")
 );