[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);
     });
   }