feat: Improving page loading

src/pages/User/UserEditPage/index.tsx

@@ -4,18 +4,20 @@ import {
   Checkbox,
   Paper,
   TextField,
+  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 { userStore, languageStore } from "@shared";
+import { userStore, languageStore, LoadingSpinner } from "@shared";
 import { useEffect, useState } from "react";
 
 export const UserEditPage = observer(() => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
 
   const { id } = useParams();
   const { editUserData, editUser, getUser, setEditUserData } = userStore;
@@ -41,18 +43,40 @@ export const UserEditPage = observer(() => {
   useEffect(() => {
     (async () => {
       if (id) {
-        const data = await getUser(Number(id));
+        setIsLoadingData(true);
+        try {
+          const data = await getUser(Number(id));
 
-        setEditUserData(
-          data?.name || "",
-          data?.email || "",
-          data?.password || "",
-          data?.is_admin || false
-        );
+          setEditUserData(
+            data?.name || "",
+            data?.email || "",
+            data?.password || "",
+            data?.is_admin || false
+          );
+        } finally {
+          setIsLoadingData(false);
+        }
+      } else {
+        setIsLoadingData(false);
       }
     })();
   }, [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">
       <div className="flex items-center gap-4">