fix: apply theme before showing the loading screen

This commit is contained in:
dec0dOS 2023-10-20 18:00:33 +01:00
parent b8a5a37fc7
commit 5be92007b7
3 changed files with 20 additions and 18 deletions

View file

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

View file

@ -7,7 +7,7 @@ function Loading() {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<CircularProgress color="secondary" /> <CircularProgress color="primary" />
<Typography variant="h6" component="div" className={classes.loadingText}> <Typography variant="h6" component="div" className={classes.loadingText}>
Loading Loading
<span className="loadingDots"></span> <span className="loadingDots"></span>

View file

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