Working language switcher

web/src/components/App.js

@@ -22,6 +22,7 @@ import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "
 import SendDialog from "./SendDialog";
 import Messaging from "./Messaging";
 import "./i18n"; // Translations!
+import {Backdrop, CircularProgress} from "@mui/material";
 
 // TODO races when two tabs are open
 // TODO investigate service workers
@@ -48,12 +49,6 @@ const App = () => {
     );
 }
 
-const Loader = () => (
-    <div>
-        <div>loading...</div>
-    </div>
-);
-
 const AllSubscriptions = () => {
     const { subscriptions } = useOutletContext();
     return <Notifications mode="all" subscriptions={subscriptions}/>;
@@ -132,6 +127,18 @@ const Main = (props) => {
     );
 };
 
+const Loader = () => (
+    <Backdrop
+        open={true}
+        sx={{
+            zIndex: 100000,
+            backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
+        }}
+    >
+        <CircularProgress color="success" disableShrink />
+    </Backdrop>
+);
+
 const updateTitle = (newNotificationsCount) => {
     document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
 }