feat: Improving page loading

src/pages/City/CityEditPage/index.tsx

@@ -6,6 +6,7 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
+  Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Save } from "lucide-react";
@@ -18,6 +19,7 @@ import {
   languageStore,
   mediaStore,
   CashedCities,
+  LoadingSpinner,
 } from "@shared";
 import { useEffect, useState } from "react";
 import { LanguageSwitcher, ImageUploadCard } from "@widgets";
@@ -30,6 +32,7 @@ import {
 export const CityEditPage = observer(() => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
   const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
   const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
   const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
@@ -62,19 +65,26 @@ export const CityEditPage = observer(() => {
   useEffect(() => {
     (async () => {
       if (id) {
-        await getCountries("ru");
+        setIsLoadingData(true);
+        try {
+          await getCountries("ru");
 
-        const ruData = await getCity(id as string, "ru");
-        const enData = await getCity(id as string, "en");
-        const zhData = await getCity(id as string, "zh");
+          const ruData = await getCity(id as string, "ru");
+          const enData = await getCity(id as string, "en");
+          const zhData = await getCity(id as string, "zh");
 
-        setEditCityData(ruData.name, ruData.country_code, ruData.arms, "ru");
-        setEditCityData(enData.name, enData.country_code, enData.arms, "en");
-        setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");
+          setEditCityData(ruData.name, ruData.country_code, ruData.arms, "ru");
+          setEditCityData(enData.name, enData.country_code, enData.arms, "en");
+          setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");
 
-        await getOneMedia(ruData.arms as string);
+          await getOneMedia(ruData.arms as string);
 
-        await getMedia();
+          await getMedia();
+        } finally {
+          setIsLoadingData(false);
+        }
+      } else {
+        setIsLoadingData(false);
       }
     })();
   }, [id]);
@@ -97,6 +107,21 @@ export const CityEditPage = observer(() => {
     ? mediaStore.media.find((m) => m.id === editCityData.arms)
     : null;
 
+  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 />