rework circulars loaders

src/renderer/components/FilesSelector.tsx

@@ -8,12 +8,12 @@ import {
   ListItemIcon,
   ListItemText,
   Collapse,
-  CircularProgress,
 } from '@mui/material';
 import FolderIcon from '@mui/icons-material/Folder';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { FullScreenLoader } from '../components/FullScreenLoader';
 
 interface FileNode {
   name: string;
@@ -190,7 +190,7 @@ export default function FilesSelector({
   };
 
   if (loading) {
-    return <CircularProgress />;
+    return <FullScreenLoader fullScreen={false} />;
   }
 
   if (error) {

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

src/renderer/components/PlayerInventory.tsx

@@ -8,7 +8,6 @@ import {
   CardMedia,
   CardContent,
   Button,
-  CircularProgress,
   Dialog,
   DialogTitle,
   DialogContent,
@@ -22,6 +21,7 @@ import {
   sellItem,
   PlayerInventoryItem,
 } from '../api';
+import { FullScreenLoader } from './FullScreenLoader';
 
 interface PlayerInventoryProps {
   username: string;
@@ -223,9 +223,7 @@ export default function PlayerInventory({
       )}
 
       {loading ? (
-        <Box sx={{ display: 'flex', justifyContent: 'center', my: 4 }}>
-          <CircularProgress />
-        </Box>
+        <FullScreenLoader fullScreen={false} />
       ) : (
         <>
           {inventoryItems.length === 0 ? (
@@ -266,7 +264,13 @@ export default function PlayerInventory({
                         alt={item.material}
                       />
                       <CardContent sx={{ p: 1 }}>
-                        <Box sx={{ display: 'flex', gap: '1vw', justifyContent: 'space-between' }}>
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            gap: '1vw',
+                            justifyContent: 'space-between',
+                          }}
+                        >
                           <Typography variant="body2" color="white" noWrap>
                             {getItemDisplayName(item.material)}
                           </Typography>
@@ -363,7 +367,7 @@ export default function PlayerInventory({
             color="primary"
             disabled={sellLoading}
           >
-            {sellLoading ? <CircularProgress size={24} /> : 'Продать'}
+            {sellLoading ? <FullScreenLoader fullScreen={false} /> : 'Продать'}
           </Button>
         </DialogActions>
       </Dialog>

src/renderer/components/ServerStatus/ServerStatus.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, CircularProgress, Avatar } from '@mui/material';
+import { Box, Typography, Avatar } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 interface ServerStatusProps {