Skip to content

I
interface
Commit 0a0053c6 authored by Moody Salem's avatar Moody Salem
Browse files
Options

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

parent 9e10abbf
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 59 deletions
src/i18n.tsx
View file @ 0a0053c6
import React, { useEffect } from 'react' import React, { useEffect, useState } from 'react'
import { i18n } from '@lingui/core' import { i18n } from '@lingui/core'
import { I18nProvider } from '@lingui/react' import { I18nProvider } from '@lingui/react'
import { ReactNode } from 'react' import { ReactNode } from 'react'
...@@ -15,13 +15,21 @@ export async function dynamicActivate(locale: SupportedLocale) { ...@@ -15,13 +15,21 @@ export async function dynamicActivate(locale: SupportedLocale) {
export function LanguageProvider({ children }: { children: ReactNode }) { export function LanguageProvider({ children }: { children: ReactNode }) {
useSetLocaleFromUrl() useSetLocaleFromUrl()
const locale = useActiveLocale() const locale = useActiveLocale()
const [loaded, setLoaded] = useState(false)
useEffect(() => { useEffect(() => {
dynamicActivate(locale).catch((error) => { dynamicActivate(locale)
console.error('Failed to activate locale', locale, error) .then(() => {
}) setLoaded(true)
})
.catch((error) => {
console.error('Failed to activate locale', locale, error)
})
}, [locale]) }, [locale])
// prevent the app from rendering with placeholder text before the locale is loaded
if (!loaded) return null
return ( return (
<I18nProvider forceRenderOnLocaleChange={false} i18n={i18n}> <I18nProvider forceRenderOnLocaleChange={false} i18n={i18n}>
{children} {children}
......
src/index.css
View file @ 0a0053c6
...@@ -44,3 +44,15 @@ html { ...@@ -44,3 +44,15 @@ html {
transform: translate(-50vw, -100vh); transform: translate(-50vw, -100vh);
z-index: -1; 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
View file @ 0a0053c6
...@@ -73,68 +73,61 @@ function TopLevelModals() { ...@@ -73,68 +73,61 @@ function TopLevelModals() {
export default function App() { export default function App() {
return ( return (
<ErrorBoundary> <ErrorBoundary>
<Suspense fallback={null}> <Route component={GoogleAnalyticsReporter} />
<Route component={GoogleAnalyticsReporter} /> <Route component={DarkModeQueryParamReader} />
<Route component={DarkModeQueryParamReader} /> <Route component={ApeModeQueryParamReader} />
<Route component={ApeModeQueryParamReader} /> <AppWrapper>
<AppWrapper> <HeaderWrapper>
<HeaderWrapper> <Header />
<Header /> </HeaderWrapper>
</HeaderWrapper> <BodyWrapper>
<BodyWrapper> <Popups />
<Popups /> <Polling />
<Polling /> <TopLevelModals />
<TopLevelModals /> <Web3ReactManager>
<Web3ReactManager> <Switch>
<Switch> <Route exact strict path="/vote" component={Vote} />
<Route exact strict path="/vote" component={Vote} /> <Route exact strict path="/vote/:id" component={VotePage} />
<Route exact strict path="/vote/:id" component={VotePage} /> <Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} />
<Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} /> <Route exact strict path="/uni" component={Earn} />
<Route exact strict path="/uni" component={Earn} /> <Route exact strict path="/uni/:currencyIdA/:currencyIdB" component={Manage} />
<Route exact strict path="/uni/:currencyIdA/:currencyIdB" component={Manage} />
<Route exact strict path="/send" component={RedirectPathToSwapOnly} /> <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
<Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} /> <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
<Route exact strict path="/swap" component={Swap} /> <Route exact strict path="/swap" component={Swap} />
<Route exact strict path="/find" component={PoolFinder} /> <Route exact strict path="/find" component={PoolFinder} />
<Route exact strict path="/pool/v2" component={PoolV2} /> <Route exact strict path="/pool/v2" component={PoolV2} />
<Route exact strict path="/pool" component={Pool} /> <Route exact strict path="/pool" component={Pool} />
<Route exact strict path="/pool/:tokenId" component={PositionPage} /> <Route exact strict path="/pool/:tokenId" component={PositionPage} />
<Route <Route exact strict path="/add/v2/:currencyIdA?/:currencyIdB?" component={RedirectDuplicateTokenIdsV2} />
exact <Route
strict exact
path="/add/v2/:currencyIdA?/:currencyIdB?" strict
component={RedirectDuplicateTokenIdsV2} path="/add/:currencyIdA?/:currencyIdB?/:feeAmount?"
/> component={RedirectDuplicateTokenIds}
<Route />
exact
strict
path="/add/:currencyIdA?/:currencyIdB?/:feeAmount?"
component={RedirectDuplicateTokenIds}
/>
<Route <Route
exact exact
strict strict
path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?" path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?"
component={AddLiquidity} component={AddLiquidity}
/> />
<Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} /> <Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
<Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} /> <Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} />
<Route exact strict path="/migrate/v2" component={MigrateV2} /> <Route exact strict path="/migrate/v2" component={MigrateV2} />
<Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} /> <Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} />
<Route component={RedirectPathToSwapOnly} /> <Route component={RedirectPathToSwapOnly} />
</Switch> </Switch>
</Web3ReactManager> </Web3ReactManager>
<Marginer /> <Marginer />
</BodyWrapper> </BodyWrapper>
</AppWrapper> </AppWrapper>
</Suspense>
</ErrorBoundary> </ErrorBoundary>
) )
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment