move context to loadable

src/frontend/src/functions/loading.tsx

@@ -1,13 +1,17 @@
-import { Center, Loader, Stack } from '@mantine/core';
+import { Center, Loader, MantineProvider, Stack } from '@mantine/core';
 import { Suspense } from 'react';
 
+import { theme } from '../theme';
+
 function LoadingFallback() {
   return (
-    <Stack>
-      <Center>
-        <Loader />
-      </Center>
-    </Stack>
+    <MantineProvider theme={theme}>
+      <Stack>
+        <Center>
+          <Loader />
+        </Center>
+      </Stack>
+    </MantineProvider>
   );
 }
 

src/frontend/src/views/MainView.tsx

@@ -1,4 +1,3 @@
-import { MantineProvider } from '@mantine/core';
 import '@mantine/core/styles.css';
 import { useViewportSize } from '@mantine/hooks';
 import { lazy, useEffect } from 'react';
@@ -6,7 +5,6 @@ import { lazy, useEffect } from 'react';
 import { setApiDefaults } from '../App';
 import { Loadable } from '../functions/loading';
 import { useLocalState } from '../states/LocalState';
-import { theme } from '../theme';
 
 function checkMobile() {
   const { height, width } = useViewportSize();
@@ -28,17 +26,9 @@ export default function MainView() {
 
   // Check if mobile
   if (!allowMobile && checkMobile()) {
-    return (
-      <MantineProvider theme={theme}>
-        <MobileAppView />
-      </MantineProvider>
-    );
+    return <MobileAppView />;
   }
 
   // Main App component
-  return (
-    <MantineProvider theme={theme}>
-      <DesktopAppView />
-    </MantineProvider>
-  );
+  return <DesktopAppView />;
 }