src/features/auth/login-form/ui/login-form.tsx

@@ -55,8 +55,8 @@ export const LoginForm = ({}: LoginFormProps) => {
   };
 
   return (
-    <Form {...form} >
+    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4 mx-auto'>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
         <FormField
           control={form.control}
           name='phoneNumber'

src/shared/language/index.tsx

@@ -1,96 +1,87 @@
-'use client';
+"use client"
 
-import { Loader } from 'lucide-react';
+import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
-import {
+import enTranslations from "./locales/en.json"
-  createContext,
+import ruTranslations from "./locales/ru.json"
-  type ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-
-import enTranslations from './locales/en.json';
-import ruTranslations from './locales/ru.json';
 
 // Define available languages
 export const languages = {
-  en: { name: 'English', flag: '🇬🇧' },
+  en: { name: "English", flag: "🇬🇧" },
-  ru: { name: 'Русский', flag: '🇷🇺' },
+  ru: { name: "Русский", flag: "🇷🇺" },
-};
+}
 
-export type Language = keyof typeof languages;
+export type Language = keyof typeof languages
 
 // Define translations type with flat structure
-export type Translations = Record<string, string>;
+export type Translations = Record<string, string>
 
 // Load translations
 const translations: Record<Language, Translations> = {
   en: enTranslations,
   ru: ruTranslations,
-};
+}
 
 // Create context
 type LanguageContextType = {
-  language: Language;
+  language: Language
-  setLanguage: (lang: Language) => void;
+  setLanguage: (lang: Language) => void
-  t: (key: string) => string;
+  t: (key: string) => string
-};
+}
 
-const LanguageContext = createContext<LanguageContextType | undefined>(
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
-  undefined,
-);
 
 // Create provider
 export function LanguageProvider({ children }: { children: ReactNode }) {
   // Default to Russian, but check localStorage on client
-  const [language, setLanguageState] = useState<Language>('ru');
+  const [language, setLanguageState] = useState<Language>("ru")
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false)
 
   useEffect(() => {
     // Check if we're in the browser
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
-      const savedLanguage = localStorage.getItem('language') as Language;
+      const savedLanguage = localStorage.getItem("language") as Language
       if (savedLanguage && languages[savedLanguage]) {
-        setLanguageState(savedLanguage);
+        setLanguageState(savedLanguage)
       }
-      setIsLoaded(true);
+      setIsLoaded(true)
     }
-  }, []);
+  }, [])
 
   const setLanguage = (lang: Language) => {
-    setLanguageState(lang);
+    setLanguageState(lang)
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
-      localStorage.setItem('language', lang);
+      localStorage.setItem("language", lang)
     }
-  };
+  }
 
   // Translation function for flat structure
   const t = (key: string): string => {
     if (translations[language][key]) {
-      return translations[language][key];
+      return translations[language][key]
     }
 
-    console.warn(`Translation key not found: ${key}`);
+    console.warn(`Translation key not found: ${key}`)
-    return key;
+    return key
-  };
+  }
 
-  return (
+  // Only render children when language is loaded from localStorage
-    <LanguageContext.Provider value={{ language, setLanguage, t }}>
+  if (!isLoaded && typeof window !== "undefined") {
-      {children}
+    return null // Or a loading spinner
-    </LanguageContext.Provider>
+  }
-  );
+
+  return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
 }
 
 // Create hook
 export function useLanguage() {
-  const context = useContext(LanguageContext);
+  const context = useContext(LanguageContext)
   if (context === undefined) {
-    throw new Error('useLanguage must be used within a LanguageProvider');
+    throw new Error("useLanguage must be used within a LanguageProvider")
   }
 
   if (typeof context.t !== 'function') {
-    throw new Error('Translation function (t) is not available');
+    throw new Error("Translation function (t) is not available");
   }
   
-  return context;
+  return context
 }