add loader to login

src/renderer/components/FullScreenLoader.tsx

@@ -0,0 +1,59 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export const FullScreenLoader = ({ message }: { message?: string }) => (
+  <Box
+    sx={{
+      position: 'fixed',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 3,
+      zIndex: 9999,
+      pointerEvents: 'none', // чтобы не блокировал клики, если нужно
+    }}
+  >
+    {/* Градиентное вращающееся кольцо */}
+    <Box
+      sx={{
+        width: 80,
+        height: 80,
+        borderRadius: '50%',
+        position: 'relative',
+        overflow: 'hidden',
+
+        // сам градиент, который будет крутиться
+        background: 'conic-gradient(#F27121, #E940CD, #8A2387, #F27121)',
+
+        animation: 'spin 1s linear infinite',
+
+        // создаём отверстие внутри маской
+        WebkitMask: 'radial-gradient(circle, transparent 55%, black 56%)',
+        mask: 'radial-gradient(circle, transparent 55%, black 56%)',
+
+        '@keyframes spin': {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
+      }}
+    />
+
+    {message && (
+      <Typography
+        variant="h6"
+        sx={{
+          fontFamily: 'Benzin-Bold',
+          background:
+            'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}
+      >
+        {message}
+      </Typography>
+    )}
+  </Box>
+);

src/renderer/pages/Login.tsx

@@ -5,12 +5,15 @@ import MemorySlider from '../components/Login/MemorySlider';
 import { useNavigate } from 'react-router-dom';
 import PopaPopa from '../components/popa-popa';
 import useConfig from '../hooks/useConfig';
+import { useState } from 'react';
+import { FullScreenLoader } from '../components/FullScreenLoader';
 
 const Login = () => {
   const navigate = useNavigate();
   const { config, setConfig, saveConfig, handleInputChange } = useConfig();
   const { status, validateSession, refreshSession, authenticateWithElyBy } =
     useAuth();
+  const [loading, setLoading] = useState(false);
 
   const authorization = async () => {
     console.log('Начинаем процесс авторизации...');
@@ -21,6 +24,7 @@ const Login = () => {
       return;
     }
 
+    setLoading(true);
     try {
       // Проверяем, есть ли сохранённый токен
       if (config.accessToken && config.clientToken) {
@@ -85,24 +89,31 @@ const Login = () => {
 
       console.log('Авторизация успешно завершена');
       navigate('/');
-    } catch (error) {
+    } catch (error: any) {
       console.log(`ОШИБКА при авторизации: ${error.message}`);
-      // Очищаем недействительные токены при ошибке
       saveConfig({
         accessToken: '',
         clientToken: '',
       });
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
     <Box>
-      <PopaPopa />
-      <AuthForm
-        config={config}
-        handleInputChange={handleInputChange}
-        onLogin={authorization}
-      />
+      {loading ? (
+        <FullScreenLoader message="Входим..." />
+      ) : (
+        <>
+          <PopaPopa />
+          <AuthForm
+            config={config}
+            handleInputChange={handleInputChange}
+            onLogin={authorization}
+          />
+        </>
+      )}
     </Box>
   );
 };