@@ -7,7 +7,7 @@ import { Raleway } from 'next/font/google'
 import { SessionProvider } from 'next-auth/react'
 import { appWithTranslation } from 'next-i18next'
 import { NextStep, NextStepProvider } from 'nextstepjs'
-import { FlagProvider } from '@unleash/proxy-client-react'
+import { FlagProvider, UnleashClient } from '@unleash/proxy-client-react'
 
 import { store } from '#/app/store/store'
 import { Error } from '#/shared'
@@ -88,30 +88,56 @@ function AppContent({
 
 function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) {
 	useBlockTelegram()
-	const { env } = useEnv()
+	const { env, loading: envLoading } = useEnv()
 
 	const unleashUrl = env?.NEXT_PUBLIC_UNLEASH_URL || process.env.NEXT_PUBLIC_UNLEASH_URL || ''
 	const unleashClientKey = env?.NEXT_PUBLIC_UNLEASH_CLIENT_KEY || process.env.NEXT_PUBLIC_UNLEASH_CLIENT_KEY || ''
 	const unleashAppName = env?.NEXT_PUBLIC_UNLEASH_APP_NAME || process.env.NEXT_PUBLIC_UNLEASH_APP_NAME || ''
 
+	const unleashClient = React.useMemo(() => {
+		if (envLoading) return null
+		if (!unleashUrl || !unleashClientKey || !unleashAppName) return null
+		return new UnleashClient({
+			url: unleashUrl,
+			clientKey: unleashClientKey,
+			appName: unleashAppName,
+		})
+	}, [envLoading, unleashAppName, unleashClientKey, unleashUrl])
+
+	React.useEffect(() => {
+		if (!unleashClient) return
+		unleashClient.start()
+		return () => {
+			unleashClient.stop?.()
+		}
+	}, [unleashClient])
+
+	if (envLoading) {
+		return null
+	}
+
 	return (
 		<>
 			<style jsx global>{`html { font-family: ${inter.style.fontFamily}; }`}</style>
-			<FlagProvider
-				config={{
-					url: unleashUrl,
-					clientKey: unleashClientKey,
-					appName: unleashAppName,
-				}}
-			>
+			{unleashClient ? (
+				<FlagProvider unleashClient={unleashClient} startClient={false}>
+					<NextStepProvider>
+						<AppContent
+							Component={Component}
+							pageProps={{ session, ...pageProps }}
+							refetchInterval={Number(env?.NEXT_PUBLIC_REFETCH_INTERVAL) || undefined}
+						/>
+					</NextStepProvider>
+				</FlagProvider>
+			) : (
 				<NextStepProvider>
 					<AppContent
-					Component={Component}
-					pageProps={{ session, ...pageProps }}
-					refetchInterval={Number(env?.NEXT_PUBLIC_REFETCH_INTERVAL) || undefined}
-				/>
+						Component={Component}
+						pageProps={{ session, ...pageProps }}
+						refetchInterval={Number(env?.NEXT_PUBLIC_REFETCH_INTERVAL) || undefined}
+					/>
 				</NextStepProvider>
-			</FlagProvider>
+			)}
 		</>
 	)
 }