From 0a0053c6f183b7ae1fe6209a17d4f47dfac922ce Mon Sep 17 00:00:00 2001
From: Moody Salem <moody.salem@gmail.com>
Date: Mon, 31 May 2021 21:36:56 -0500
Subject: [PATCH] fix: prevent the interface from flashing the wrong locale
 temporarily on load

---
 src/i18n.tsx      |  16 +++++--
 src/index.css     |  12 ++++++
 src/pages/App.tsx | 103 +++++++++++++++++++++-------------------------
 3 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/src/i18n.tsx b/src/i18n.tsx
index 3e39b14e3e..6683b99309 100644
--- a/src/i18n.tsx
+++ b/src/i18n.tsx
@@ -1,4 +1,4 @@
-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) => {
-      console.error('Failed to activate locale', locale, 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}
diff --git a/src/index.css b/src/index.css
index 08afeff2a8..0c97b2d02d 100644
--- a/src/index.css
+++ b/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;
+    }
+}
+
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 38402d98a8..d72ae4f97f 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -73,68 +73,61 @@ function TopLevelModals() {
 export default function App() {
   return (
     <ErrorBoundary>
-      <Suspense fallback={null}>
-        <Route component={GoogleAnalyticsReporter} />
-        <Route component={DarkModeQueryParamReader} />
-        <Route component={ApeModeQueryParamReader} />
-        <AppWrapper>
-          <HeaderWrapper>
-            <Header />
-          </HeaderWrapper>
-          <BodyWrapper>
-            <Popups />
-            <Polling />
-            <TopLevelModals />
-            <Web3ReactManager>
-              <Switch>
-                <Route exact strict path="/vote" component={Vote} />
-                <Route exact strict path="/vote/:id" component={VotePage} />
-                <Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} />
-                <Route exact strict path="/uni" component={Earn} />
-                <Route exact strict path="/uni/:currencyIdA/:currencyIdB" component={Manage} />
+      <Route component={GoogleAnalyticsReporter} />
+      <Route component={DarkModeQueryParamReader} />
+      <Route component={ApeModeQueryParamReader} />
+      <AppWrapper>
+        <HeaderWrapper>
+          <Header />
+        </HeaderWrapper>
+        <BodyWrapper>
+          <Popups />
+          <Polling />
+          <TopLevelModals />
+          <Web3ReactManager>
+            <Switch>
+              <Route exact strict path="/vote" component={Vote} />
+              <Route exact strict path="/vote/:id" component={VotePage} />
+              <Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} />
+              <Route exact strict path="/uni" component={Earn} />
+              <Route exact strict path="/uni/:currencyIdA/:currencyIdB" component={Manage} />
 
-                <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
-                <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
-                <Route exact strict path="/swap" component={Swap} />
+              <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
+              <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
+              <Route exact strict path="/swap" component={Swap} />
 
-                <Route exact strict path="/find" component={PoolFinder} />
-                <Route exact strict path="/pool/v2" component={PoolV2} />
-                <Route exact strict path="/pool" component={Pool} />
-                <Route exact strict path="/pool/:tokenId" component={PositionPage} />
+              <Route exact strict path="/find" component={PoolFinder} />
+              <Route exact strict path="/pool/v2" component={PoolV2} />
+              <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/:currencyIdA?/:currencyIdB?/:feeAmount?"
-                  component={RedirectDuplicateTokenIds}
-                />
+              <Route exact strict path="/add/v2/:currencyIdA?/:currencyIdB?" component={RedirectDuplicateTokenIdsV2} />
+              <Route
+                exact
+                strict
+                path="/add/:currencyIdA?/:currencyIdB?/:feeAmount?"
+                component={RedirectDuplicateTokenIds}
+              />
 
-                <Route
-                  exact
-                  strict
-                  path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?"
-                  component={AddLiquidity}
-                />
+              <Route
+                exact
+                strict
+                path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?"
+                component={AddLiquidity}
+              />
 
-                <Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
-                <Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} />
+              <Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
+              <Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} />
 
-                <Route exact strict path="/migrate/v2" component={MigrateV2} />
-                <Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} />
+              <Route exact strict path="/migrate/v2" component={MigrateV2} />
+              <Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} />
 
-                <Route component={RedirectPathToSwapOnly} />
-              </Switch>
-            </Web3ReactManager>
-            <Marginer />
-          </BodyWrapper>
-        </AppWrapper>
-      </Suspense>
+              <Route component={RedirectPathToSwapOnly} />
+            </Switch>
+          </Web3ReactManager>
+          <Marginer />
+        </BodyWrapper>
+      </AppWrapper>
     </ErrorBoundary>
   )
 }