fix: prevent the interface from flashing the wrong locale temporarily on load

src/i18n.tsx

-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
 import { ReactNode } from 'react'
@@ -15,13 +15,21 @@ export async function dynamicActivate(locale: SupportedLocale) {
 export function LanguageProvider({ children }: { children: ReactNode }) {
   useSetLocaleFromUrl()
   const locale = useActiveLocale()
+  const [loaded, setLoaded] = useState(false)
 
   useEffect(() => {
-    dynamicActivate(locale).catch((error) => {
+    dynamicActivate(locale)
+      .then(() => {
+        setLoaded(true)
+      })
+      .catch((error) => {
         console.error('Failed to activate locale', locale, error)
       })
   }, [locale])
 
+  // prevent the app from rendering with placeholder text before the locale is loaded
+  if (!loaded) return null
+
   return (
     <I18nProvider forceRenderOnLocaleChange={false} i18n={i18n}>
       {children}

src/index.css

@@ -44,3 +44,15 @@ html {
     transform: translate(-50vw, -100vh);
     z-index: -1;
 }
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background-color: #212429;
+    }
+}
+@media (prefers-color-scheme: light) {
+    html {
+        background-color: #F7F8FA;
+    }
+}
+

src/pages/App.tsx

@@ -73,7 +73,6 @@ function TopLevelModals() {
 export default function App() {
   return (
     <ErrorBoundary>
-      <Suspense fallback={null}>
       <Route component={GoogleAnalyticsReporter} />
       <Route component={DarkModeQueryParamReader} />
       <Route component={ApeModeQueryParamReader} />
@@ -102,12 +101,7 @@ export default function App() {
               <Route exact strict path="/pool" component={Pool} />
               <Route exact strict path="/pool/:tokenId" component={PositionPage} />
 
-                <Route
-                  exact
-                  strict
-                  path="/add/v2/:currencyIdA?/:currencyIdB?"
-                  component={RedirectDuplicateTokenIdsV2}
-                />
+              <Route exact strict path="/add/v2/:currencyIdA?/:currencyIdB?" component={RedirectDuplicateTokenIdsV2} />
               <Route
                 exact
                 strict
@@ -134,7 +128,6 @@ export default function App() {
           <Marginer />
         </BodyWrapper>
       </AppWrapper>
-      </Suspense>
     </ErrorBoundary>
   )
 }