fix: set theme without reload (#1396)

MaibornWolff · Apr 16, 2024 · 1332c72 · 1332c72
1 parent bff789a
commit 1332c72
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -11,10 +11,10 @@ import authorization_groups from "./access_control/authorization_groups";
 import users from "./access_control/users";
 import englishMessages from "./commons/i18n/en";
 import { Layout } from "./commons/layout";
+import { darkTheme, lightTheme } from "./commons/layout/themes";
 import notifications from "./commons/notifications";
 import drfProvider from "./commons/ra-data-django-rest-framework";
 import Settings from "./commons/settings/Settings";
-import { getTheme } from "./commons/settings/functions";
 import evidences from "./core/evidences";
 import observation_logs from "./core/observation_logs";
 import observations from "./core/observations";
@@ -45,7 +45,8 @@ const App = () => {
                 layout={Layout}
                 i18nProvider={i18nProvider}
                 disableTelemetry
-                theme={getTheme()}
+                theme={lightTheme}
+                darkTheme={darkTheme}
             >
                 <CustomRoutes>
                     <Route path="/access_control/users" element={<AccessControlAdministration />} />

diff --git a/frontend/src/commons/layout/AppBar.tsx b/frontend/src/commons/layout/AppBar.tsx
@@ -3,7 +3,7 @@ import PersonIcon from "@mui/icons-material/Person";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { Box, Divider, ListItemIcon, ListItemText, MenuItem, Theme, Typography, useMediaQuery } from "@mui/material";
 import { forwardRef } from "react";
-import { AppBar, Logout, UserMenu, useUserMenu } from "react-admin";
+import { AppBar, LoadingIndicator, Logout, UserMenu, useUserMenu } from "react-admin";
 import { Link } from "react-router-dom";
 
 import About from "../about/About";
@@ -89,7 +89,16 @@ const CustomUserMenu = () => {
 const CustomAppBar = () => {
     const isLargeEnough = useMediaQuery<Theme>((theme) => theme.breakpoints.up("sm"));
     return (
-        <AppBar color="secondary" elevation={1} userMenu={<CustomUserMenu />}>
+        <AppBar
+            color="secondary"
+            elevation={1}
+            userMenu={<CustomUserMenu />}
+            toolbar={
+                <>
+                    <LoadingIndicator />
+                </>
+            }
+        >
             <Typography
                 variant="h6"
                 color="inherit"

diff --git a/frontend/src/commons/settings/Settings.tsx b/frontend/src/commons/settings/Settings.tsx
@@ -9,32 +9,22 @@ import {
     RadioGroup,
     Stack,
 } from "@mui/material";
-import { useState } from "react";
 import { Title, useTheme } from "react-admin";
 
 import { darkTheme, lightTheme } from "../layout/themes";
 import { getSettingListSize, getSettingTheme, saveSettingListSize, saveSettingTheme } from "./functions";
 
 const Settings = () => {
-    const [previousTheme, setPreviousTheme] = useState(getSettingTheme());
     const [, setTheme] = useTheme();
 
     function setLightTheme() {
         setTheme(lightTheme);
         saveSettingTheme("light");
-        if (previousTheme != "light") {
-            window.location.reload();
-        }
-        setPreviousTheme("light");
     }
 
     function setDarkTheme() {
         setTheme(darkTheme);
         saveSettingTheme("dark");
-        if (previousTheme != "dark") {
-            window.location.reload();
-        }
-        setPreviousTheme("dark");
     }
 
     return (