feat: Add scale on group click, add cache for map entities, fix map preview loading

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

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useTransform } from "./TransformContext";
 import { coordinatesToLocal, localToCoordinates } from "./utils";
 import { SCALE_FACTOR } from "./Constants";
+import { toast } from "react-toastify";
 
 export function RightSidebar() {
   const {
@@ -360,8 +361,14 @@ export function RightSidebar() {
         variant="contained"
         color="secondary"
         sx={{ mt: 2 }}
-        onClick={() => {
-          saveChanges();
+        onClick={async () => {
+          try {
+            await saveChanges();
+            toast.success("Изменения сохранены");
+          } catch (error) {
+            console.error(error);
+            toast.error("Ошибка при сохранении изменений");
+          }
         }}
       >
         Сохранить изменения

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

@@ -26,6 +26,7 @@ import { Sight } from "./Sight";
 import { SightData } from "./types";
 import { Station } from "./Station";
 import { UP_SCALE } from "./Constants";
+import CircularProgress from "@mui/material/CircularProgress";
 
 extend({
   Container,
@@ -36,13 +37,27 @@ extend({
   Text,
 });
 
+const Loading = () => {
+  const { isRouteLoading, isStationLoading, isSightLoading } = useMapData();
+
+  if (isRouteLoading || isStationLoading || isSightLoading) {
+    return (
+      <div className="fixed flex z-1 items-center justify-center h-screen w-screen bg-[#111]">
+        <CircularProgress />
+      </div>
+    );
+  }
+
+  return null;
+};
 export const RoutePreview = () => {
+  const { routeData, stationData, sightData } = useMapData();
   return (
     <MapDataProvider>
       <TransformProvider>
         <Stack direction="row" height="100vh" width="100vw" overflow="hidden">
-          <LanguageSwitcher />
-
+          {routeData && stationData && sightData ? <LanguageSwitcher /> : null}
+          <Loading />
           <LeftSidebar />
           <Stack direction="row" flex={1} position="relative" height="100%">
             <RouteMap />
@@ -145,8 +160,7 @@ export const RouteMap = observer(() => {
   ]);
 
   if (!routeData || !stationData || !sightData) {
-    console.error("routeData, stationData or sightData is null");
-    return <div>Loading...</div>;
+    return null;
   }
 
   return (