fix: apply theme before showing the loading screen

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,9 +11,14 @@ 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>
+      <Suspense fallback={<Loading />}>
         <BrowserRouter basename="/app">
           <Bar />
           <Switch>
@@ -23,6 +29,7 @@ function App() {
             <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>
   </React.StrictMode>,
   document.getElementById("root")
 );