refactor(theme-shared): improve modal ux performance

npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md

@@ -3,7 +3,7 @@
 Example Usage:
 
 ```html
-<abp-modal size="lg" [(visible)]="isModalShow" [centered]="true">
+<abp-modal size="md" [(visible)]="isModalShow" [centered]="false">
   <ng-template #abpHeader>
     <h3>Modal Title</h3>
   </ng-template>

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -17,6 +17,8 @@ import { Toaster } from '../../models/toaster';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
+const ANIMATION_TIMEOUT = 200;
+
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
@@ -30,10 +32,12 @@ export class ModalComponent implements OnDestroy {
     if (typeof value !== 'boolean') return;
 
     if (!this.modalContent) {
-      setTimeout(() => {
+      if (value) {
-        this.showModal = value;
+        setTimeout(() => {
-        this.visible = value;
+          this.showModal = value;
-      }, 0);
+          this.visible = value;
+        }, 0);
+      }
       return;
     }
 
@@ -47,7 +51,7 @@ export class ModalComponent implements OnDestroy {
         this.setVisible(value);
         // this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
         this.ngOnDestroy();
-      }, 350);
+      }, ANIMATION_TIMEOUT - 10);
     }
   }
 
@@ -91,7 +95,7 @@ export class ModalComponent implements OnDestroy {
     this.showModal = value;
 
     value
-      ? timer(500)
+      ? timer(ANIMATION_TIMEOUT + 100)
           .pipe(take(1))
           .subscribe(_ => (this.closable = true))
       : (this.closable = false);
@@ -100,7 +104,7 @@ export class ModalComponent implements OnDestroy {
   listen() {
     fromEvent(document, 'click')
       .pipe(
-        debounceTime(350),
+        debounceTime(100),
         takeUntil(this.destroy$),
         filter((event: MouseEvent) => {
           const isOpenConfirmation = this.isOpenConfirmation || document.querySelector('p-toastitem');
@@ -120,8 +124,8 @@ export class ModalComponent implements OnDestroy {
     fromEvent(document, 'keyup')
       .pipe(
         takeUntil(this.destroy$),
+        debounceTime(250),
         filter((key: KeyboardEvent) => key && key.code === 'Escape' && this.closable),
-        debounceTime(350),
       )
       .subscribe(_ => {
         this.close();
@@ -133,7 +137,6 @@ export class ModalComponent implements OnDestroy {
       .pipe(
         takeUntil(this.destroy$),
         filter(() => !!(this.closable && this.modalContent)),
-        debounceTime(350),
       )
       .subscribe(() => this.close());
   }
@@ -150,7 +153,7 @@ export class ModalComponent implements OnDestroy {
       this.confirmationService
         .warn('AbpAccount::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpAccount::AreYouSure')
         .subscribe((status: Toaster.Status) => {
-          timer(400).subscribe(() => {
+          timer(ANIMATION_TIMEOUT).subscribe(() => {
             this.isOpenConfirmation = false;
           });
 
@@ -166,7 +169,7 @@ export class ModalComponent implements OnDestroy {
 
 function getFlatNodes(nodes: NodeList): HTMLElement[] {
   return Array.from(nodes).reduce(
-    (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? Array.from(val.childNodes) : [val])],
+    (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val])],
     [],
   );
 }

npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts

@@ -38,11 +38,11 @@ export default `
 /* <animations */
 
 .fade-in-top {
-  animation: fadeInTop 0.4s ease-in-out;
+  animation: fadeInTop 0.2s ease-in-out;
 }
 
 .fade-out-top {
-  animation: fadeOutTop 0.4s ease-in-out;
+  animation: fadeOutTop 0.2s ease-in-out;
 }