feat: add loader for saving route and description for stations

src/pages/Route/route-preview/RightSidebar.tsx

@@ -1,4 +1,12 @@
-import { Button, Stack, TextField, Typography, Slider } from "@mui/material";
+import {
+  Button,
+  Stack,
+  TextField,
+  Typography,
+  Slider,
+  CircularProgress,
+  Box,
+} from "@mui/material";
 import { useMapData } from "./MapDataContext";
 import { useEffect, useState } from "react";
 import { useTransform } from "./TransformContext";
@@ -28,6 +36,7 @@ export function RightSidebar() {
   const [isUserEditing, setIsUserEditing] = useState<boolean>(false);
   const [iconSize, setIconSize] = useState<number>(100);
   const [fontSize, setFontSize] = useState<number>(100);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
 
   useEffect(() => {
     if (originalRouteData) {
@@ -150,11 +159,19 @@ export function RightSidebar() {
               newMinScale = 10;
             }
 
+            if (newMinScale > 300) {
+              newMinScale = 297;
+            }
+
             setMinScale(newMinScale);
 
             if (maxScale - newMinScale < 2) {
               let newMaxScale = newMinScale + 2;
 
+              if (newMaxScale > 300) {
+                newMaxScale = 300;
+              }
+
               if (newMaxScale < 3) {
                 newMaxScale = 3;
                 setMinScale(1);
@@ -443,18 +460,35 @@ export function RightSidebar() {
       <Button
         variant="contained"
         color="secondary"
-        sx={{ mt: 2 }}
+        sx={{ mt: 2, position: "relative" }}
+        disabled={isSaving}
         onClick={async () => {
+          setIsSaving(true);
           try {
             await saveChanges();
             toast.success("Изменения сохранены");
           } catch (error) {
             console.error(error);
             toast.error("Ошибка при сохранении изменений");
+          } finally {
+            setIsSaving(false);
           }
         }}
       >
-        Сохранить изменения
+        {isSaving ? (
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+            }}
+          >
+            <CircularProgress size={20} sx={{ color: "inherit" }} />
+            <span>Сохранение...</span>
+          </Box>
+        ) : (
+          "Сохранить изменения"
+        )}
       </Button>
 
       <svg