fix: posthog first time loading delay (#587)

* fix: posthog first time loading delay * simplify fix for posthog
GoodDollar · Jan 15, 2025 · 70d5891 · 70d5891
1 parent 45890c4
commit 70d5891
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -76,23 +76,23 @@ const enableServiceWorker =
 
 const ProviderWrapper = ({ children }) => (
     <Provider store={store}>
-        <OnboardProviderWrapper>
-            <GoodXProvider nativeBaseProps={{ config: { suppressColorAccessibilityWarning: true }, theme: nbTheme }}>
-                <Web3ContextProvider>
-                    <LanguageProvider>
-                        <PostHogProvider
-                            apiKey={import.meta.env.REACT_APP_POSTHOG_KEY}
-                            options={{
-                                host: import.meta.env.REACT_APP_POSTHOG_PROXY ?? 'https://app.posthog.com',
-                            }}
-                            autocapture={false}
-                        >
-                            {children}
-                        </PostHogProvider>
-                    </LanguageProvider>
-                </Web3ContextProvider>
-            </GoodXProvider>
-        </OnboardProviderWrapper>
+        <PostHogProvider
+            apiKey={import.meta.env.REACT_APP_POSTHOG_KEY}
+            options={{
+                host: import.meta.env.REACT_APP_POSTHOG_PROXY ?? 'https://app.posthog.com',
+            }}
+            autocapture={false}
+        >
+            <OnboardProviderWrapper>
+                <GoodXProvider
+                    nativeBaseProps={{ config: { suppressColorAccessibilityWarning: true }, theme: nbTheme }}
+                >
+                    <Web3ContextProvider>
+                        <LanguageProvider>{children}</LanguageProvider>
+                    </Web3ContextProvider>
+                </GoodXProvider>
+            </OnboardProviderWrapper>
+        </PostHogProvider>
     </Provider>
 )
 

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -1,5 +1,8 @@
-import React, { lazy, Suspense } from 'react'
+import React, { lazy, Suspense, useEffect, useState } from 'react'
 import { Route, Switch } from 'react-router-dom'
+import { usePostHog } from 'posthog-react-native'
+import { Spinner } from 'native-base'
+
 import { RedirectHashRoutes } from 'pages/routes/redirects'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { CustomLightSpinner } from 'theme'
@@ -15,6 +18,19 @@ const GoodId = lazy(() => import('./pages/gd/GoodId'))
 const BuyGd = lazy(() => import('./pages/gd/BuyGD'))
 const NewsFeedPage = lazy(() => import('./pages/gd/News'))
 
+const RoutesWrapper = () => {
+    const posthog = usePostHog()
+    const [posthogInitialized, setPosthogInitialized] = useState(false)
+
+    useEffect(() => {
+        if (posthog) {
+            posthog.onFeatureFlags(() => setPosthogInitialized(true))
+        }
+    }, [posthog])
+
+    return posthogInitialized ? <Routes /> : <Spinner variant="page-loader" size="lg" />
+}
+
 function Routes(): JSX.Element {
     const { chainId } = useActiveWeb3React()
 
@@ -36,4 +52,4 @@ function Routes(): JSX.Element {
     )
 }
 
-export default Routes
+export default RoutesWrapper