From d5eb0bf6595a71b49c69b774bdcd7938d39269a7 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Mon, 15 Apr 2024 21:31:46 +0200
Subject: [PATCH] move context to loadable

---
 src/frontend/src/functions/loading.tsx | 16 ++++++++++------
 src/frontend/src/views/MainView.tsx    | 14 ++------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/functions/loading.tsx b/src/frontend/src/functions/loading.tsx
index 270552f63a..157306e0d4 100644
--- a/src/frontend/src/functions/loading.tsx
+++ b/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>
   );
 }
 
diff --git a/src/frontend/src/views/MainView.tsx b/src/frontend/src/views/MainView.tsx
index 3b84dec3f4..56c2bb77e6 100644
--- a/src/frontend/src/views/MainView.tsx
+++ b/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 />;
 }