From 0857ba0090a956165a6f7ee9c1f1e2b7eb3f1b28 Mon Sep 17 00:00:00 2001
From: Manojava Koushik <111366021+manojava-gk@users.noreply.github.com>
Date: Mon, 25 Sep 2023 14:41:10 +0530
Subject: [PATCH] bugfix(invite form): disable invite button (#265)

---
 CHANGELOG.md                                 |  3 +++
 src/components/overlays/InviteForm/index.tsx | 24 +++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5f130528..755d4dd11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@
   - Added Sub menu for active services in service overview
   - Added Deactivate functionality
   - Added image to service overview cards
+- Invite Business Partner Form
+  - Fix loader position to center
+  - Disable invite button when loader is visible
 - Data Space
   - Last section background color issue
 - Connector Deletion
diff --git a/src/components/overlays/InviteForm/index.tsx b/src/components/overlays/InviteForm/index.tsx
index 66af3cda2..072aa4384 100644
--- a/src/components/overlays/InviteForm/index.tsx
+++ b/src/components/overlays/InviteForm/index.tsx
@@ -27,6 +27,7 @@ import {
   DialogContent,
   DialogHeader,
   Input,
+  LoadingButton,
   Typography,
 } from '@catena-x/portal-shared-components'
 import debounce from 'lodash.debounce'
@@ -127,17 +128,28 @@ export const InviteForm = ({
               ></Input>
             ))}
           </form>
-          <span className={`InviteFormResult ${state}`}>
-            {state === 'busy' && <span className="loader" />}
-          </span>
         </DialogContent>
         <DialogActions>
           <Button variant="outlined" onClick={(e) => handleOverlayClose(e)}>
             {`${t('global.actions.cancel')}`}
           </Button>
-          <Button name="send" disabled={inpValid[4]} onClick={doSubmit}>
-            {`${t('content.invite.invite')}`}
-          </Button>
+          {state === 'busy' ? (
+            <LoadingButton
+              color="primary"
+              helperText=""
+              helperTextColor="success"
+              label=""
+              loadIndicator={t('global.actions.loading')}
+              loading
+              size="medium"
+              onButtonClick={() => {}}
+              sx={{ marginLeft: '10px' }}
+            />
+          ) : (
+            <Button name="send" disabled={inpValid[4]} onClick={doSubmit}>
+              {`${t('content.invite.invite')}`}
+            </Button>
+          )}
         </DialogActions>
       </Dialog>
     </>