rework circulars loaders

2025-12-05 01:29:06 +05:00
parent fc5e65f189
commit 215e3d6d39
11 changed files with 130 additions and 93 deletions
--- a/src/renderer/pages/Login.tsx
+++ b/src/renderer/pages/Login.tsx
@ -8,7 +8,11 @@ import useConfig from '../hooks/useConfig';
 import { useState } from 'react';
 import { FullScreenLoader } from '../components/FullScreenLoader';

-const Login = () => {
+interface LoginProps {
+  onLoginSuccess?: (username: string) => void;
+}
+
+const Login = ({ onLoginSuccess }: LoginProps) => {
  const navigate = useNavigate();
  const { config, setConfig, saveConfig, handleInputChange } = useConfig();
  const { status, validateSession, refreshSession, authenticateWithElyBy } =
@ -88,6 +92,11 @@ const Login = () => {
      }

      console.log('Авторизация успешно завершена');
+
+      if (onLoginSuccess) {
+        onLoginSuccess(config.username);
+      }
+
      navigate('/');
    } catch (error: any) {
      console.log(`ОШИБКА при авторизации: ${error.message}`);
--- a/src/renderer/pages/Marketplace.tsx
+++ b/src/renderer/pages/Marketplace.tsx
@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import {
  Box,
  Typography,
-  CircularProgress,
  Button,
  Grid,
  Card,
@ -18,6 +17,7 @@ import {
 import { isPlayerOnline, getPlayerServer } from '../utils/playerOnlineCheck';
 import { buyItem, fetchMarketplace, MarketplaceResponse, Server } from '../api';
 import PlayerInventory from '../components/PlayerInventory';
+import { FullScreenLoader } from '../components/FullScreenLoader';

 interface TabPanelProps {
  children?: React.ReactNode;
@ -195,14 +195,14 @@ export default function Marketplace() {
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
-          height: '100%',
+          height: '20vh',
          gap: 2,
        }}
      >
-        <CircularProgress size={60} />
-        <Typography variant="h6" color="white">
-          Проверяем, находитесь ли вы на сервере...
-        </Typography>
+        <FullScreenLoader
+          fullScreen={true}
+          message="Проверяем, находитесь ли вы на сервере..."
+        />
      </Box>
    );
  }
@ -339,7 +339,7 @@ export default function Marketplace() {
      <TabPanel value={tabValue} index={0}>
        {marketLoading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', mt: '50vw' }}>
-            <CircularProgress />
+            <FullScreenLoader fullScreen={false} />
          </Box>
        ) : !marketItems || marketItems.items.length === 0 ? (
          <Box sx={{ mt: 4, textAlign: 'center' }}>
--- a/src/renderer/pages/Profile.tsx
+++ b/src/renderer/pages/Profile.tsx
@ -19,10 +19,10 @@ import {
  Select,
  MenuItem,
  Alert,
-  CircularProgress,
 } from '@mui/material';

 import CapeCard from '../components/CapeCard';
+import { FullScreenLoader } from '../components/FullScreenLoader';

 export default function Profile() {
  const fileInputRef = useRef<HTMLInputElement>(null);
@ -195,7 +195,7 @@ export default function Profile() {
      }}
    >
      {loading ? (
-        <CircularProgress />
+        <FullScreenLoader message="Загрузка вашего профиля" />
      ) : (
        <>
          <Paper
@ -406,12 +406,12 @@ export default function Profile() {
                disabled={uploadStatus === 'loading' || !skinFile}
                startIcon={
                  uploadStatus === 'loading' ? (
-                    <CircularProgress size={20} color="inherit" />
+                    <FullScreenLoader fullScreen={false} />
                  ) : null
                }
              >
                {uploadStatus === 'loading' ? (
-                  <Typography sx={{ color: 'white' }}>Загрузка...</Typography>
+                  <FullScreenLoader message="Загрузка..." />
                ) : (
                  <Typography sx={{ color: 'white' }}>
                    Установить скин
--- a/src/renderer/pages/Registration.tsx
+++ b/src/renderer/pages/Registration.tsx
@ -12,7 +12,6 @@ import {
  TextField,
  Button,
  Snackbar,
-  CircularProgress,
 } from '@mui/material';
 import LoginRoundedIcon from '@mui/icons-material/LoginRounded';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
@ -25,6 +24,7 @@ import {
 import QRCodeStyling from 'qr-code-styling';
 import popalogo from '../../../assets/icons/popa-popa.svg';
 import GradientTextField from '../components/GradientTextField';
+import { FullScreenLoader } from '../components/FullScreenLoader';

 const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
  [`&.${stepConnectorClasses.alternativeLabel}`]: {
@ -34,7 +34,7 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
    [`& .${stepConnectorClasses.line}`]: {
      backgroundImage:
        //'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
-        'linear-gradient( 95deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)'
+        'linear-gradient( 95deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)',
    },
  },
  [`&.${stepConnectorClasses.completed}`]: {
@ -46,7 +46,8 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
  [`& .${stepConnectorClasses.line}`]: {
    height: 3,
    border: 0,
-    backgroundImage: 'linear-gradient( 275deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)',
+    backgroundImage:
+      'linear-gradient( 275deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)',
    borderRadius: 1,
    transition: 'background-image 1s ease, background-color 1s ease',
    ...theme.applyStyles('dark', {
@ -84,8 +85,7 @@ const ColorlibStepIconRoot = styled('div')<{
    {
      props: ({ ownerState }) => ownerState.completed,
      style: {
-        backgroundImage:
-          '#adadad',
+        backgroundImage: '#adadad',
      },
    },
  ],
@ -282,7 +282,7 @@ export const Registration = () => {
        sx={{
          position: 'absolute',
          top: '10%',
-         }} // чтобы отделить степпер от формы
+        }} // чтобы отделить степпер от формы
      >
        {steps.map((label) => (
          <Step key={label}>
@ -311,7 +311,15 @@ export const Registration = () => {
        ))}
      </Stepper>

-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '50vw', mt: activeStep === 1 ? '20%' : '0%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1vh',
+          width: '50vw',
+          mt: activeStep === 1 ? '20%' : '0%',
+        }}
+      >
        {activeStep === 0 && (
          <Box
            sx={{
@ -357,13 +365,13 @@ export const Registration = () => {
                transition: 'transform 0.3s ease',
                width: '60%',
                mt: 2,
-                background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
+                background:
+                  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
                fontFamily: 'Benzin-Bold',
                borderRadius: '2.5vw',
                fontSize: '2vw',
                '&:hover': {
                  transform: 'scale(1.1)',
-
                },
              }}
              onClick={handleCreateAccount}
@ -389,13 +397,13 @@ export const Registration = () => {
                transition: 'transform 0.3s ease',
                width: '60%',
                mt: 2,
-                background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
+                background:
+                  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
                fontFamily: 'Benzin-Bold',
                borderRadius: '2.5vw',
                fontSize: '2vw',
                '&:hover': {
                  transform: 'scale(1.1)',
-
                },
              }}
              onClick={handleOpenBot}
@ -425,10 +433,10 @@ export const Registration = () => {
                  {verificationCode}
                </Typography>
                <Typography variant="body1">Ждем ответа от бота</Typography>
-                <CircularProgress />
+                <FullScreenLoader fullScreen={false} />
              </>
            ) : (
-              <CircularProgress />
+              <FullScreenLoader fullScreen={false} />
            )}
          </Box>
        )}
--- a/src/renderer/pages/Shop.tsx
+++ b/src/renderer/pages/Shop.tsx
@ -9,6 +9,7 @@ import {
  StoreCape,
 } from '../api';
 import { useEffect, useState } from 'react';
+import { FullScreenLoader } from '../components/FullScreenLoader';

 export default function Shop() {
  const [storeCapes, setStoreCapes] = useState<StoreCape[]>([]);
@ -88,7 +89,7 @@ export default function Shop() {
      }}
    >
      {loading ? (
-        <Typography>Загрузка...</Typography>
+        <FullScreenLoader message="Загрузка..." />
      ) : (
        <Box
          sx={{
--- a/src/renderer/pages/VersionsExplorer.tsx
+++ b/src/renderer/pages/VersionsExplorer.tsx
@ -8,7 +8,6 @@ import {
  CardContent,
  CardActions,
  Button,
-  CircularProgress,
  Modal,
  List,
  ListItem,
@ -18,6 +17,7 @@ import {
 import { useNavigate } from 'react-router-dom';
 import AddIcon from '@mui/icons-material/Add';
 import DownloadIcon from '@mui/icons-material/Download';
+import { FullScreenLoader } from '../components/FullScreenLoader';

 interface VersionCardProps {
  id: string;
@ -308,9 +308,7 @@ export const VersionsExplorer = () => {
      />

      {loading ? (
-        <Box display="flex" justifyContent="center" my={5}>
-          <CircularProgress />
-        </Box>
+        <FullScreenLoader message="Загрузка ваших версий..." />
      ) : (
        <Grid
          container