feat: Improving page loading

src/pages/Route/RouteEditPage/index.tsx

@@ -27,6 +27,7 @@ import {
   ArticleSelectOrCreateDialog,
   SelectMediaDialog,
   UploadMediaDialog,
+  LoadingSpinner,
 } from "@shared";
 import { toast } from "react-toastify";
 import { stationsStore } from "@shared";
@@ -37,6 +38,7 @@ export const RouteEditPage = observer(() => {
   const { id } = useParams();
   const { editRouteData, copyRouteAction } = routeStore;
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
   const [isSelectArticleDialogOpen, setIsSelectArticleDialogOpen] =
     useState(false);
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
@@ -48,18 +50,27 @@ export const RouteEditPage = observer(() => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const response = await routeStore.getRoute(Number(id));
-      routeStore.setEditRouteData(response);
-      languageStore.setLanguage("ru");
+      if (!id) {
+        setIsLoadingData(false);
+        return;
+      }
+      setIsLoadingData(true);
+      try {
+        const response = await routeStore.getRoute(Number(id));
+        routeStore.setEditRouteData(response);
+        languageStore.setLanguage("ru");
+      } finally {
+        setIsLoadingData(false);
+      }
     };
     fetchData();
-  }, []);
+  }, [id]);
 
   useEffect(() => {
     const fetchData = async () => {
-      carrierStore.getCarriers(language);
-      stationsStore.getStations();
-      articlesStore.getArticleList();
+      await carrierStore.getCarriers(language);
+      await stationsStore.getStations();
+      await articlesStore.getArticleList();
     };
     fetchData();
   }, [id, language]);
@@ -233,6 +244,21 @@ export const RouteEditPage = observer(() => {
     (article) => article.id === editRouteData.governor_appeal
   );
 
+  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">
       <div className="flex items-center gap-4">