fix: fix page login

Reviewed-on: #2

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

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

src/shared/language/index.tsx

@@ -1,87 +1,96 @@
-"use client"
+'use client';
 
-import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
-import enTranslations from "./locales/en.json"
-import ruTranslations from "./locales/ru.json"
+import { Loader } from 'lucide-react';
+import {
+  createContext,
+  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: "🇬🇧" },
-  ru: { name: "Русский", flag: "🇷🇺" },
-}
+  en: { name: 'English', 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
-  setLanguage: (lang: Language) => void
-  t: (key: string) => string
-}
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: (key: string) => string;
+};
 
-const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
+const LanguageContext = createContext<LanguageContextType | 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 [isLoaded, setIsLoaded] = useState(false)
+  const [language, setLanguageState] = useState<Language>('ru');
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     // Check if we're in the browser
-    if (typeof window !== "undefined") {
-      const savedLanguage = localStorage.getItem("language") as Language
+    if (typeof window !== 'undefined') {
+      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)
-    if (typeof window !== "undefined") {
-      localStorage.setItem("language", lang)
+    setLanguageState(lang);
+    if (typeof window !== 'undefined') {
+      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}`)
-    return key
-  }
+    console.warn(`Translation key not found: ${key}`);
+    return key;
+  };
 
-  // Only render children when language is loaded from localStorage
-  if (!isLoaded && typeof window !== "undefined") {
-    return null // Or a loading spinner
-  }
-
-  return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</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;
+}