feat: Improving page loading

src/pages/EditSightPage/index.tsx

@@ -3,7 +3,12 @@ import { InformationTab, LeaveAgree, RightWidgetTab } from "@widgets";
 import { LeftWidgetTab } from "@widgets";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { articlesStore, cityStore, editSightStore } from "@shared";
+import {
+  articlesStore,
+  cityStore,
+  editSightStore,
+  LoadingSpinner,
+} from "@shared";
 import { useBlocker, useParams } from "react-router-dom";
 
 function a11yProps(index: number) {
@@ -15,6 +20,7 @@ function a11yProps(index: number) {
 
 export const EditSightPage = observer(() => {
   const [value, setValue] = useState(0);
+  const [isLoadingData, setIsLoadingData] = useState(true);
   const { sight, getSightInfo, needLeaveAgree } = editSightStore;
   const { getArticles } = articlesStore;
 
@@ -33,13 +39,20 @@ export const EditSightPage = observer(() => {
   useEffect(() => {
     const fetchData = async () => {
       if (id) {
-        await getCities("ru");
-        await getSightInfo(+id, "ru");
-        await getSightInfo(+id, "en");
-        await getSightInfo(+id, "zh");
-        await getArticles("ru");
-        await getArticles("en");
-        await getArticles("zh");
+        setIsLoadingData(true);
+        try {
+          await getCities("ru");
+          await getSightInfo(+id, "ru");
+          await getSightInfo(+id, "en");
+          await getSightInfo(+id, "zh");
+          await getArticles("ru");
+          await getArticles("en");
+          await getArticles("zh");
+        } finally {
+          setIsLoadingData(false);
+        }
+      } else {
+        setIsLoadingData(false);
       }
     };
     fetchData();
@@ -79,12 +92,25 @@ export const EditSightPage = observer(() => {
         </Tabs>
       </Box>
 
-      {sight.common.id !== 0 && (
-        <div className="flex-1">
-          <InformationTab value={value} index={0} />
-          <LeftWidgetTab value={value} index={1} />
-          <RightWidgetTab value={value} index={2} />
-        </div>
+      {isLoadingData ? (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "60vh",
+          }}
+        >
+          <LoadingSpinner message="Загрузка данных достопримечательности..." />
+        </Box>
+      ) : (
+        sight.common.id !== 0 && (
+          <div className="flex-1">
+            <InformationTab value={value} index={0} />
+            <LeftWidgetTab value={value} index={1} />
+            <RightWidgetTab value={value} index={2} />
+          </div>
+        )
       )}
 
       {blocker.state === "blocked" ? <LeaveAgree blocker={blocker} /> : null}