@@ -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'
@@ -90,30 +90,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>
+			)}
 		</>
 	)
 }
@@ -27,7 +27,8 @@
 	color: #a6a5a5;
 	font-size: 14px;
 	margin-bottom: 8px;
-  width: 100%;
+	width: 100%;
+	font-family: inherit;
 
 	&_primary {
 		font-weight: 500;
@@ -47,7 +48,7 @@
 	outline: none;
 	font-size: 16px;
 	width: 100%;
-	font-family: '__Raleway_9d395e' !important;
+	font-family: inherit;
 
 	&:focus {
 		border: none;
@@ -390,12 +390,20 @@ export function VoiceCloneSelect({
 						onClick={(e) => e.stopPropagation()}
 						onMouseDown={(e) => e.stopPropagation()}
 						onKeyDown={(e) => {
+							// Иначе MUI MenuList перехватывает печатные клавиши (typeahead) и перескакивает на другую опцию
+							if (e.key !== 'Escape') {
+								e.stopPropagation()
+							}
 							if (e.key === 'Enter') {
 								e.preventDefault()
-								e.stopPropagation()
 								if (isMediaVoice(item)) void commitRename(item)
 							}
 						}}
+						onKeyUp={(e) => {
+							if (e.key !== 'Escape') {
+								e.stopPropagation()
+							}
+						}}
 						aria-label='Название голоса'
 						autoFocus
 					/>