feat: pagination for tables with deleted station directions

src/pages/Vehicle/VehicleEditPage/index.tsx

@@ -6,6 +6,7 @@ import {
   FormControl,
   InputLabel,
   Button,
+  Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
@@ -16,6 +17,7 @@ import {
   languageStore,
   VEHICLE_TYPES,
   vehicleStore,
+  LoadingSpinner,
 } from "@shared";
 import { toast } from "react-toastify";
 
@@ -31,6 +33,8 @@ export const VehicleEditPage = observer(() => {
   } = vehicleStore;
   const { getCarriers } = carrierStore;
   const { language } = languageStore;
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
 
   useEffect(() => {
     // Устанавливаем русский язык при загрузке страницы
@@ -38,31 +42,58 @@ export const VehicleEditPage = observer(() => {
   }, []);
 
   useEffect(() => {
-    (async () => {
-      await getVehicle(Number(id));
-      await getCarriers(language);
+    const fetchAndSetVehicleData = async () => {
+      if (!id) {
+        setIsLoadingData(false);
+        return;
+      }
 
-      setEditVehicleData({
-        tail_number: vehicle[Number(id)]?.vehicle.tail_number,
-        type: vehicle[Number(id)]?.vehicle.type,
-        carrier: vehicle[Number(id)]?.vehicle.carrier,
-        carrier_id: vehicle[Number(id)]?.vehicle.carrier_id,
-      });
-    })();
+      setIsLoadingData(true);
+      try {
+        await getVehicle(Number(id));
+        await getCarriers(language);
+
+        setEditVehicleData({
+          tail_number: vehicle[Number(id)]?.vehicle.tail_number,
+          type: vehicle[Number(id)]?.vehicle.type,
+          carrier: vehicle[Number(id)]?.vehicle.carrier,
+          carrier_id: vehicle[Number(id)]?.vehicle.carrier_id,
+        });
+      } finally {
+        setIsLoadingData(false);
+      }
+    };
+
+    fetchAndSetVehicleData();
   }, [id, language]);
-  const [isLoading, setIsLoading] = useState(false);
   const handleEdit = async () => {
     try {
       setIsLoading(true);
       await editVehicle(Number(id), editVehicleData);
       toast.success("Транспортное средство успешно обновлено");
-      navigate("/vehicle");
+      navigate("/devices");
     } catch (error) {
       toast.error("Ошибка при обновлении транспортного средства");
     } finally {
       setIsLoading(false);
     }
   };
+
+  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">