From c4bdcc97e19738ea89f17e7ade6576196d6b3408 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 27 Aug 2022 10:21:21 -0600
Subject: [PATCH] Load the translation

---
 web/src/App.jsx | 64 ++++++++++++++++++++++++++-----------------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index f095aa025..1cc7a1d06 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -8,42 +8,46 @@ import { Router } from 'preact-router';
 import Sidebar from './Sidebar';
 import { DarkModeProvider, DrawerProvider } from './context';
 import useSWR from 'swr';
+import i18n from './i18n';
+import { Suspense } from 'preact/compat';
 
 export default function App() {
   const { data: config } = useSWR('config');
   const cameraComponent = config && config.ui.use_experimental ? Routes.getCameraV2 : Routes.getCamera;
 
   return (
-    <DarkModeProvider>
-      <DrawerProvider>
-        <div data-testid="app" className="w-full">
-          <AppBar />
-          {!config ? (
-            <div className="flex flex-grow-1 min-h-screen justify-center items-center">
-              <ActivityIndicator />
-            </div>
-          ) : (
-            <div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
-              <Sidebar />
-              <div className="w-full flex-auto mt-16 min-w-0">
-                <Router>
-                  <AsyncRoute path="/cameras/:camera/editor" getComponent={Routes.getCameraMap} />
-                  <AsyncRoute path="/cameras/:camera" getComponent={cameraComponent} />
-                  <AsyncRoute path="/birdseye" getComponent={Routes.getBirdseye} />
-                  <AsyncRoute path="/events" getComponent={Routes.getEvents} />
-                  <AsyncRoute
-                    path="/recording/:camera/:date?/:hour?/:minute?/:second?"
-                    getComponent={Routes.getRecording}
-                  />
-                  <AsyncRoute path="/debug" getComponent={Routes.getDebug} />
-                  <AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
-                  <Cameras default path="/" />
-                </Router>
+    <Suspense fallback={<ActivityIndicator />}>
+      <DarkModeProvider>
+        <DrawerProvider>
+          <div data-testid="app" className="w-full">
+            <AppBar />
+            {!config ? (
+              <div className="flex flex-grow-1 min-h-screen justify-center items-center">
+                <ActivityIndicator />
               </div>
-            </div>
-          )}
-        </div>
-      </DrawerProvider>
-    </DarkModeProvider>
+            ) : (
+              <div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+                <Sidebar />
+                <div className="w-full flex-auto mt-16 min-w-0">
+                  <Router>
+                    <AsyncRoute path="/cameras/:camera/editor" getComponent={Routes.getCameraMap} />
+                    <AsyncRoute path="/cameras/:camera" getComponent={cameraComponent} />
+                    <AsyncRoute path="/birdseye" getComponent={Routes.getBirdseye} />
+                    <AsyncRoute path="/events" getComponent={Routes.getEvents} />
+                    <AsyncRoute
+                      path="/recording/:camera/:date?/:hour?/:minute?/:second?"
+                      getComponent={Routes.getRecording}
+                    />
+                    <AsyncRoute path="/debug" getComponent={Routes.getDebug} />
+                    <AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
+                    <Cameras default path="/" />
+                  </Router>
+                </div>
+              </div>
+            )}
+          </div>
+        </DrawerProvider>
+      </DarkModeProvider>
+    </Suspense>
   );
 }