feat: Improving page loading

src/pages/Station/StationEditPage/index.tsx

@@ -6,13 +6,19 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
+  Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Save } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
-import { stationsStore, languageStore, cityStore } from "@shared";
+import {
+  stationsStore,
+  languageStore,
+  cityStore,
+  LoadingSpinner,
+} from "@shared";
 import { useEffect, useState } from "react";
 import { LanguageSwitcher } from "@widgets";
 import { LinkedSights } from "../LinkedSights";
@@ -21,6 +27,7 @@ import { SaveWithoutCityAgree } from "@widgets";
 export const StationEditPage = observer(() => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
   const { language } = languageStore;
   const { id } = useParams();
   const {
@@ -90,18 +97,41 @@ export const StationEditPage = observer(() => {
 
   useEffect(() => {
     const fetchAndSetStationData = async () => {
-      if (!id) return;
+      if (!id) {
+        setIsLoadingData(false);
+        return;
+      }
 
-      const stationId = Number(id);
-      await getEditStation(stationId);
-      await getCities("ru");
-      await getCities("en");
-      await getCities("zh");
+      setIsLoadingData(true);
+      try {
+        const stationId = Number(id);
+        await getEditStation(stationId);
+        await getCities("ru");
+        await getCities("en");
+        await getCities("zh");
+      } finally {
+        setIsLoadingData(false);
+      }
     };
 
     fetchAndSetStationData();
   }, [id]);
 
+  if (isLoadingData) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          minHeight: "60vh",
+        }}
+      >
+        <LoadingSpinner message="Загрузка данных станции..." />
+      </Box>
+    );
+  }
+
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
       <LanguageSwitcher />