Add in progress for delete connection (airbytehq#11409)

roelsadza · Mar 25, 2022 · 1f88a75 · 1f88a75
1 parent 55a87bf
commit 1f88a75
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx b/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
@@ -8,7 +8,7 @@ import DeleteModal from "./components/DeleteModal";
 
 type IProps = {
   type: "source" | "destination" | "connection";
-  onDelete: () => void;
+  onDelete: () => Promise<void>;
 };
 
 const DeleteBlockComponent = styled(ContentCard)`

diff --git a/airbyte-webapp/src/components/DeleteBlock/components/DeleteModal.tsx b/airbyte-webapp/src/components/DeleteBlock/components/DeleteModal.tsx
@@ -3,10 +3,11 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import Modal from "components/Modal";
-import { Button } from "components";
+import { Button, LoadingButton } from "components";
+import { useMutation } from "react-query";
 export type IProps = {
   onClose: () => void;
-  onSubmit: () => void;
+  onSubmit: () => Promise<void>;
   type: "source" | "destination" | "connection";
 };
 
@@ -29,6 +30,8 @@ const ButtonWithMargin = styled(Button)`
 `;
 
 const DeleteModal: React.FC<IProps> = ({ onClose, onSubmit, type }) => {
+  const { isLoading, mutateAsync } = useMutation(() => onSubmit());
+
   return (
     <Modal
       onClose={onClose}
@@ -40,9 +43,15 @@ const DeleteModal: React.FC<IProps> = ({ onClose, onSubmit, type }) => {
           <ButtonWithMargin onClick={onClose} type="button" secondary>
             <FormattedMessage id="form.cancel" />
           </ButtonWithMargin>
-          <Button type="button" danger onClick={onSubmit} data-id="delete">
+          <LoadingButton
+            type="button"
+            danger
+            isLoading={isLoading}
+            onClick={() => mutateAsync()}
+            data-id="delete"
+          >
             <FormattedMessage id="form.delete" />
-          </Button>
+          </LoadingButton>
         </ButtonContent>
       </Content>
     </Modal>