fix(CreateService): should display spinner while processing form

Altinn · Nov 27, 2023 · e86fe5a · e86fe5a
1 parent 2f80b1b
commit e86fe5a
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/frontend/dashboard/pages/CreateService/CreateService.tsx b/frontend/dashboard/pages/CreateService/CreateService.tsx
@@ -39,14 +39,14 @@ export const CreateService = ({ user, organizations }: CreateServiceProps): JSX.
     repoName: '',
   });
 
-  const { mutate: addRepo, isLoading: isCreatingRepo } = useAddRepoMutation({
+  const { mutate: addRepoMutation, isLoading: isCreatingRepo } = useAddRepoMutation({
     hideDefaultError: (error: AxiosError) => error?.response?.status === ServerCodes.Conflict,
   });
 
   const defaultSelectedOrgOrUser: string =
     selectedContext === SelectedContextType.Self ? user.login : selectedContext;
   const createAppRepo = async (createAppForm: CreateAppForm) => {
-    addRepo(
+    addRepoMutation(
       {
         org: createAppForm.org,
         repository: createAppForm.repoName,
@@ -105,6 +105,7 @@ export const CreateService = ({ user, organizations }: CreateServiceProps): JSX.
     return isOrgValid && isRepoNameValid;
   };
 
+  console.log(isCreatingRepo);
   return (
     <form onSubmit={handleCreateAppFormSubmit} className={classes.createAppForm}>
       <ServiceOwnerSelector
@@ -116,14 +117,16 @@ export const CreateService = ({ user, organizations }: CreateServiceProps): JSX.
       />
       <RepoNameInput name='repoName' errorMessage={formError.repoName} />
       <div className={classes.actionContainer}>
-        <Button type='submit' color='first' size='small' disabled={isCreatingRepo}>
-          {isCreatingRepo ? (
-            <AltinnSpinner size='xxsmall' aria-label={t('dashboard.creating_your_service')} />
-          ) : (
-            <span>{t('dashboard.create_service_btn')}</span>
-          )}
-        </Button>
-        <Link to={DASHBOARD_ROOT_ROUTE}>{t('general.cancel')}</Link>
+        {isCreatingRepo ? (
+          <AltinnSpinner spinnerText={t('dashboard.creating_your_service')} />
+        ) : (
+          <>
+            <Button type='submit' color='first' size='small' disabled={isCreatingRepo}>
+              {t('dashboard.create_service_btn')}
+            </Button>
+            <Link to={DASHBOARD_ROOT_ROUTE}>{t('general.cancel')}</Link>
+          </>
+        )}
       </div>
     </form>
   );