From a46ce08aec9ccecc58d79930f77ba44dfc5d17ab Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Mon, 1 Jul 2024 16:43:27 +0800
Subject: [PATCH] fix(abc:notice-icon): fix nz-tabset animation triggers panel
 height

- close https://github.com/ng-alain/delon/pull/1804
---
 .../abc/notice-icon/notice-icon.component.html   | 16 +++++++++-------
 .../abc/notice-icon/notice-icon.component.ts     |  6 ++++++
 packages/abc/notice-icon/notice-icon.spec.ts     | 10 +++++-----
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/abc/notice-icon/notice-icon.component.html b/packages/abc/notice-icon/notice-icon.component.html
index 0f5ba532f..f3d08c05e 100644
--- a/packages/abc/notice-icon/notice-icon.component.html
+++ b/packages/abc/notice-icon/notice-icon.component.html
@@ -19,13 +19,15 @@
   </div>
   <nz-dropdown-menu #noticeMenu="nzDropdownMenu">
     <nz-spin [nzSpinning]="loading" [nzDelay]="0">
-      <nz-tabset [nzSelectedIndex]="0" [nzCentered]="centered">
-        @for (i of data; track $index) {
-          <nz-tab [nzTitle]="i.title">
-            <notice-icon-tab [locale]="locale" [data]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
-          </nz-tab>
-        }
-      </nz-tabset>
+      @if (delayShow) {
+        <nz-tabset [nzSelectedIndex]="0" [nzCentered]="centered">
+          @for (i of data; track $index) {
+            <nz-tab [nzTitle]="i.title">
+              <notice-icon-tab [locale]="locale" [data]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
+            </nz-tab>
+          }
+        </nz-tabset>
+      }
     </nz-spin>
   </nz-dropdown-menu>
 }
diff --git a/packages/abc/notice-icon/notice-icon.component.ts b/packages/abc/notice-icon/notice-icon.component.ts
index d7af780d8..ebd438d73 100644
--- a/packages/abc/notice-icon/notice-icon.component.ts
+++ b/packages/abc/notice-icon/notice-icon.component.ts
@@ -70,8 +70,14 @@ export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
     return `header-dropdown notice-icon${!this.centered ? ' notice-icon__tab-left' : ''}`;
   }
 
+  delayShow = false;
   onVisibleChange(result: boolean): void {
+    this.delayShow = result;
     this.popoverVisibleChange.emit(result);
+    if (result) {
+      // Next tick run
+      Promise.resolve().then(() => this.cdr.detectChanges());
+    }
   }
 
   onSelect(i: NoticeIconSelect): void {
diff --git a/packages/abc/notice-icon/notice-icon.spec.ts b/packages/abc/notice-icon/notice-icon.spec.ts
index 5cae88d79..d2faf0efe 100644
--- a/packages/abc/notice-icon/notice-icon.spec.ts
+++ b/packages/abc/notice-icon/notice-icon.spec.ts
@@ -68,7 +68,7 @@ describe('abc: notice-icon', () => {
     });
     it('should be control loading in visible popover', done => {
       context.loading = true;
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         const el = document.querySelector('.ant-spin-container') as HTMLElement;
@@ -78,7 +78,7 @@ describe('abc: notice-icon', () => {
     });
     it('should be select item', done => {
       spyOn(context, 'select');
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         expect(context.select).not.toHaveBeenCalled();
@@ -90,7 +90,7 @@ describe('abc: notice-icon', () => {
     });
     it('should be clear', done => {
       spyOn(context, 'clear');
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         expect(context.clear).not.toHaveBeenCalled();
@@ -102,7 +102,7 @@ describe('abc: notice-icon', () => {
     });
     it('#centered', done => {
       context.centered = true;
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         expect(document.querySelectorAll('.notice-icon__tab-left').length).toBe(0);
@@ -112,7 +112,7 @@ describe('abc: notice-icon', () => {
   });
 
   it('#i18n', done => {
-    context.popoverVisible = true;
+    context.comp.onVisibleChange(true);
     context.data = [{ title: 'a1', list: [] }];
     fixture.detectChanges();
     setTimeout(() => {