feat: Update

src/pages/Route/LinekedStations.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import {
   Stack,
   Typography,
-  Button,
   FormControl,
   Accordion,
   AccordionSummary,
@@ -35,6 +34,7 @@ import {
 } from "@hello-pangea/dnd";
 
 import {
+  AnimatedCircleButton,
   authInstance,
   languageStore,
   routeStore,
@@ -141,6 +141,9 @@ const LinkedItemsContentsInner = <
   const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set());
   const [activeTab, setActiveTab] = useState(0);
   const [searchQuery, setSearchQuery] = useState("");
+  const [isLinkingSingle, setIsLinkingSingle] = useState(false);
+  const [isLinkingBulk, setIsLinkingBulk] = useState(false);
+  const [detachingIds, setDetachingIds] = useState<Set<number>>(new Set());
 
   useEffect(() => {}, [error]);
 
@@ -250,6 +253,7 @@ const LinkedItemsContentsInner = <
         ),
       };
 
+      setIsLinkingSingle(true);
       authInstance
         .post(`/${parentResource}/${parentId}/${childResource}`, requestData)
         .then(() => {
@@ -268,12 +272,20 @@ const LinkedItemsContentsInner = <
         .catch((error) => {
           console.error("Error linking item:", error);
           setError("Failed to link station");
+        })
+        .finally(() => {
+          setIsLinkingSingle(false);
         });
     }
   };
 
   const deleteItem = (itemId: number) => {
     setError(null);
+    setDetachingIds((prev) => {
+      const next = new Set(prev);
+      next.add(itemId);
+      return next;
+    });
     authInstance
       .delete(`/${parentResource}/${parentId}/${childResource}`, {
         data: { [`${childResource}_id`]: itemId },
@@ -285,6 +297,13 @@ const LinkedItemsContentsInner = <
       .catch((error) => {
         console.error("Error deleting item:", error);
         setError("Failed to delete station");
+      })
+      .finally(() => {
+        setDetachingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(itemId);
+          return next;
+        });
       });
   };
 
@@ -311,6 +330,7 @@ const LinkedItemsContentsInner = <
     if (selectedItems.size === 0) return;
 
     setError(null);
+    setIsLinkingBulk(true);
     const selectedStations = Array.from(selectedItems).map((id) => ({ id }));
     const requestData = {
       stations: [
@@ -330,6 +350,9 @@ const LinkedItemsContentsInner = <
       .catch((error) => {
         console.error("Error linking items:", error);
         setError("Failed to link stations");
+      })
+      .finally(() => {
+        setIsLinkingBulk(false);
       });
   };
 
@@ -399,7 +422,7 @@ const LinkedItemsContentsInner = <
                             ))}
                             {type === "edit" && (
                               <TableCell>
-                                <Button
+                                <AnimatedCircleButton
                                   variant="outlined"
                                   color="error"
                                   size="small"
@@ -407,9 +430,11 @@ const LinkedItemsContentsInner = <
                                     e.stopPropagation();
                                     deleteItem(item.id);
                                   }}
+                                  disabled={detachingIds.has(item.id)}
+                                  loading={detachingIds.has(item.id)}
                                 >
                                   Отвязать
-                                </Button>
+                                </AnimatedCircleButton>
                               </TableCell>
                             )}
                           </TableRow>
@@ -520,14 +545,15 @@ const LinkedItemsContentsInner = <
                   />
                 </FormControl>
 
-                <Button
+                <AnimatedCircleButton
                   variant="contained"
                   onClick={linkItem}
-                  disabled={!selectedItemId}
+                  disabled={!selectedItemId || isLinkingSingle}
+                  loading={isLinkingSingle}
                   sx={{ alignSelf: "flex-start" }}
                 >
                   Добавить
-                </Button>
+                </AnimatedCircleButton>
               </Stack>
             )}
 
@@ -587,14 +613,15 @@ const LinkedItemsContentsInner = <
                   </Stack>
                 </Paper>
 
-                <Button
+                <AnimatedCircleButton
                   variant="contained"
                   onClick={handleBulkLink}
-                  disabled={selectedItems.size === 0}
+                  disabled={selectedItems.size === 0 || isLinkingBulk}
+                  loading={isLinkingBulk}
                   sx={{ alignSelf: "flex-start" }}
                 >
                   Добавить выбранные ({selectedItems.size})
-                </Button>
+                </AnimatedCircleButton>
               </Stack>
             )}
           </Box>