bugfix(invite form): disable invite button (#265)

eclipse-tractusx · Sep 25, 2023 · 0857ba0 · 0857ba0
1 parent 71df55d
commit 0857ba0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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>
     </>