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>
+);