[CL-485] Add small delay for async action loading state (#12835)

libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.spec.ts

@@ -103,7 +103,7 @@ describe("CipherAttachmentsComponent", () => {
     fixture = TestBed.createComponent(CipherAttachmentsComponent);
     component = fixture.componentInstance;
     component.cipherId = "5555-444-3333" as CipherId;
-    component.submitBtn = {} as ButtonComponent;
+    component.submitBtn = TestBed.createComponent(ButtonComponent).componentInstance;
     fixture.detectChanges();
   });
 
@@ -134,34 +134,38 @@ describe("CipherAttachmentsComponent", () => {
 
   describe("bitSubmit", () => {
     beforeEach(() => {
-      component.submitBtn.disabled = undefined;
-      component.submitBtn.loading = undefined;
+      component.submitBtn.disabled.set(undefined);
+      component.submitBtn.loading.set(undefined);
     });
 
     it("updates sets initial state of the submit button", async () => {
       await component.ngOnInit();
 
-      expect(component.submitBtn.disabled).toBe(true);
+      expect(component.submitBtn.disabled()).toBe(true);
     });
 
     it("sets submitBtn loading state", () => {
+      jest.useFakeTimers();
+
       component.bitSubmit.loading = true;
 
-      expect(component.submitBtn.loading).toBe(true);
+      jest.runAllTimers();
+
+      expect(component.submitBtn.loading()).toBe(true);
 
       component.bitSubmit.loading = false;
 
-      expect(component.submitBtn.loading).toBe(false);
+      expect(component.submitBtn.loading()).toBe(false);
     });
 
     it("sets submitBtn disabled state", () => {
       component.bitSubmit.disabled = true;
 
-      expect(component.submitBtn.disabled).toBe(true);
+      expect(component.submitBtn.disabled()).toBe(true);
 
       component.bitSubmit.disabled = false;
 
-      expect(component.submitBtn.disabled).toBe(false);
+      expect(component.submitBtn.disabled()).toBe(false);
     });
   });
 
@@ -169,7 +173,7 @@ describe("CipherAttachmentsComponent", () => {
     let file: File;
 
     beforeEach(() => {
-      component.submitBtn.disabled = undefined;
+      component.submitBtn.disabled.set(undefined);
       file = new File([""], "attachment.txt", { type: "text/plain" });
 
       const inputElement = fixture.debugElement.query(By.css("input[type=file]"));
@@ -189,7 +193,7 @@ describe("CipherAttachmentsComponent", () => {
     });
 
     it("updates disabled state of submit button", () => {
-      expect(component.submitBtn.disabled).toBe(false);
+      expect(component.submitBtn.disabled()).toBe(false);
     });
   });
 

libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.ts

@@ -114,7 +114,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
         return;
       }
 
-      this.submitBtn.disabled = status !== "VALID";
+      this.submitBtn.disabled.set(status !== "VALID");
     });
   }
 
@@ -127,7 +127,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
 
     // Update the initial state of the submit button
     if (this.submitBtn) {
-      this.submitBtn.disabled = !this.attachmentForm.valid;
+      this.submitBtn.disabled.set(!this.attachmentForm.valid);
     }
   }
 
@@ -137,7 +137,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
         return;
       }
 
-      this.submitBtn.loading = loading;
+      this.submitBtn.loading.set(loading);
     });
 
     this.bitSubmit.disabled$.pipe(takeUntilDestroyed(this.destroy$)).subscribe((disabled) => {
@@ -145,7 +145,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
         return;
       }
 
-      this.submitBtn.disabled = disabled;
+      this.submitBtn.disabled.set(disabled);
     });
   }
 

libs/vault/src/cipher-form/components/cipher-form.component.ts

@@ -144,11 +144,11 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
   ngAfterViewInit(): void {
     if (this.submitBtn) {
       this.bitSubmit.loading$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((loading) => {
-        this.submitBtn.loading = loading;
+        this.submitBtn.loading.set(loading);
       });
 
       this.bitSubmit.disabled$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((disabled) => {
-        this.submitBtn.disabled = disabled;
+        this.submitBtn.disabled.set(disabled);
       });
     }
   }

libs/vault/src/cipher-form/components/item-details/item-details-section.component.spec.ts

@@ -250,6 +250,7 @@ describe("ItemDetailsSectionComponent", () => {
 
   describe("showOwnership", () => {
     it("should return true if ownership change is allowed or in edit mode with at least one organization", () => {
+      component.config.allowPersonalOwnership = true;
       jest.spyOn(component, "allowOwnershipChange", "get").mockReturnValue(true);
       expect(component.showOwnership).toBe(true);
 
@@ -261,6 +262,7 @@ describe("ItemDetailsSectionComponent", () => {
     });
 
     it("should hide the ownership control if showOwnership is false", async () => {
+      component.config.allowPersonalOwnership = true;
       jest.spyOn(component, "showOwnership", "get").mockReturnValue(false);
       fixture.detectChanges();
       await fixture.whenStable();
@@ -271,6 +273,7 @@ describe("ItemDetailsSectionComponent", () => {
     });
 
     it("should show the ownership control if showOwnership is true", async () => {
+      component.config.allowPersonalOwnership = true;
       jest.spyOn(component, "allowOwnershipChange", "get").mockReturnValue(true);
       fixture.detectChanges();
       await fixture.whenStable();

libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts

@@ -104,7 +104,7 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
         return;
       }
 
-      this.submitBtn.loading = loading;
+      this.submitBtn.loading.set(loading);
     });
   }
 

libs/vault/src/components/assign-collections.component.ts

@@ -213,7 +213,7 @@ export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewI
         return;
       }
 
-      this.submitBtn.loading = loading;
+      this.submitBtn.loading.set(loading);
     });
 
     this.bitSubmit.disabled$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
@@ -221,7 +221,7 @@ export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewI
         return;
       }
 
-      this.submitBtn.disabled = disabled;
+      this.submitBtn.disabled.set(disabled);
     });
   }