rework circulars loaders

src/renderer/components/FullScreenLoader.tsx

@@ -1,59 +1,72 @@
 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',
+interface FullScreenLoaderProps {
+  message?: string;
+  fullScreen?: boolean; // <-- новый проп
+}
 
-        // сам градиент, который будет крутиться
-        background: 'conic-gradient(#F27121, #E940CD, #8A2387, #F27121)',
+export const FullScreenLoader = ({
+  message,
+  fullScreen = true,
+}: FullScreenLoaderProps) => {
+  const containerSx = fullScreen
+    ? {
+        position: 'fixed' as const,
+        inset: 0,
+        display: 'flex',
+        flexDirection: 'column' as const,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 3,
+        zIndex: 9999,
+        pointerEvents: 'none' as const,
+      }
+    : {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 3,
+        width: '100%',
+        height: '100%',
+      };
 
-        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"
+  return (
+    <Box sx={containerSx}>
+      {/* Градиентное вращающееся кольцо */}
+      <Box
         sx={{
-          fontFamily: 'Benzin-Bold',
-          background:
-            'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
-          WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent',
+          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>
-    )}
-  </Box>
-);
+      />
+
+      {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>
+  );
+};