show loader when modifying card

src/app/components/admin/admin.component.html

@@ -39,12 +39,12 @@
     </mat-form-field>
     <div class="flex mt-2">
       <app-button
-        [disabled]="!this.deletionForm.valid"
-        [transparent]="!this.deletionForm.valid"
+        [disabled]="!this.deletionForm.valid || (deleting$ | async) === true"
+        [transparent]="!this.deletionForm.valid || (deleting$ | async) === true"
+        [loading]="(deleting$ | async) === true"
         [text]="'Farewell!'"
         [symbol]="'waving_hand'"
         [color]="'pink'"
-        [loading]="(deleting$ | async) === true"
       ></app-button>
     </div>
   </form>

src/app/components/edit-user-card/edit-user-card.component.html

@@ -105,10 +105,11 @@
     <input matInput formControlName="bestAdviceInput" />
   </mat-form-field>
 
-  <div class="flex justify-center">
+  <div class="flex">
     <app-button
-      [disabled]="!this.userForm.valid"
-      [transparent]="!this.userForm.valid"
+      [disabled]="!this.userForm.valid || (cardModifying$ | async) === true"
+      [transparent]="!this.userForm.valid || (cardModifying$ | async) === true"
+      [loading]="(cardModifying$ | async) === true"
       text="Update"
       symbol="save"
       color="pink"

src/app/components/edit-user-card/edit-user-card.component.ts

@@ -17,6 +17,7 @@ import { loadCardById } from 'src/app/state/card/card.actions';
 import {
   selectCardError,
   selectCardLoading,
+  selectCardModifying,
   selectCardWithUserById,
 } from 'src/app/state/card/card.selectors';
 import {
@@ -83,6 +84,7 @@ export class EditUserCardComponent implements OnInit {
   });
 
   cardLoading$ = this.store.select(selectCardLoading);
+  cardModifying$ = this.store.select(selectCardModifying);
   cardError$ = this.store.select(selectCardError);
   pictureLoading$ = this.store.select(selectPictureLoading);
   pictureError$ = this.store.select(selectPictureError);

src/app/state/card/card.reducers.ts

@@ -35,18 +35,31 @@ export const cardReducer = createReducer(
     };
   }),
 
+  on(CardActions.loadCardByIdSuccess, (state, { card }): CardState => {
+    const entityState = cardAdapter.upsertOne(card, state);
+
+    return {
+      ...entityState,
+      loading: false,
+      error: false,
+    };
+  }),
+
   on(
-    CardActions.loadCardByIdSuccess,
-    CardActions.modifyCardSuccess,
-    (state, { card }): CardState => {
-      const entityState = cardAdapter.upsertOne(card, state);
+    CardActions.modifyCard,
+    (state: CardState): CardState => ({
+      ...state,
+      modifying: true,
+    }),
+  ),
 
-      return {
-        ...entityState,
-        loading: false,
-        error: false,
-      };
-    },
+  on(
+    CardActions.modifyCardSuccess,
+    CardActions.modifyCardError,
+    (state): CardState => ({
+      ...state,
+      modifying: false,
+    }),
   ),
 
   on(CardActions.changeCardsFilter, (state, { showAll }): CardState => {

src/app/state/card/card.selectors.ts

@@ -24,6 +24,11 @@ export const selectCardLoading = createSelector(
   (state) => state.loading,
 );
 
+export const selectCardModifying = createSelector(
+  selectCardState,
+  (state) => state.modifying,
+);
+
 export const selectCardError = createSelector(
   selectCardState,
   (state) => state.error,

src/app/state/card/card.state.ts

@@ -7,6 +7,7 @@ export interface CardState extends EntityState<Card> {
   next: string | null;
   previous: string | null;
   loading: boolean;
+  modifying: boolean;
   error: boolean;
   showAll: boolean;
   pageSize: number;
@@ -23,6 +24,7 @@ export const initialCardState: CardState = cardAdapter.getInitialState({
   next: null,
   previous: null,
   loading: false,
+  modifying: false,
   error: false,
   showAll: true,
   pageSize: 12,