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 (
+    <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 (
+    return <MobileAppView />;
-      <MantineProvider theme={theme}>
-        <MobileAppView />
-      </MantineProvider>
-    );
   }
 
   // Main App component
-  return (
+  return <DesktopAppView />;
-    <MantineProvider theme={theme}>
-      <DesktopAppView />
-    </MantineProvider>
-  );
 }