Query: disable delete button when pending

apps/web/Components/Admin/Cache/Query.tsx

@@ -7,7 +7,7 @@ import { Button, Collapse } from 'ui/elements';
 import { Flex } from 'ui/grid';
 
 type QueryProps = {
-  readonly handleDeleteQuery: () => void;
+  readonly handleDeleteQuery: () => Promise<void>;
   readonly queryKey: string;
 };
 
@@ -29,12 +29,23 @@ export const Query = memo(({ handleDeleteQuery, queryKey }: QueryProps) => {
   });
 
   const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
+  const [deletePending, setDeletePending] = useState(false);
 
   const content = (
     <>
       <StyledPre>{JSON.stringify(data, null, 2)}</StyledPre>
       <Flex justifyContent="flex-end">
-        <Button type="primary" danger onClick={handleDeleteQuery}>
+        <Button
+          type="primary"
+          danger
+          disabled={deletePending}
+          onClick={() => {
+            setDeletePending(true);
+            handleDeleteQuery().finally(() => {
+              setDeletePending(false);
+            });
+          }}
+        >
           Удалить
         </Button>
       </Flex>

apps/web/Components/Admin/Cache/QueryList.tsx

@@ -14,16 +14,12 @@ export const QueryList = memo(({ queries }: QueryListProps) => {
   );
 
   function deleteQuery(queryKey: string) {
-    cacheApi.deleteQuery(queryKey).then(() => setDeletedQueries([...deletedQueries, queryKey]));
+    return cacheApi
+      .deleteQuery(queryKey)
+      .then(() => setDeletedQueries([...deletedQueries, queryKey]));
   }
 
   return activeQueries.map((queryKey) => (
-    <Query
-      key={queryKey}
-      queryKey={queryKey}
-      handleDeleteQuery={() => {
-        deleteQuery(queryKey);
-      }}
-    />
+    <Query key={queryKey} queryKey={queryKey} handleDeleteQuery={() => deleteQuery(queryKey)} />
   ));
 });