fix(module:card): use skeleton instead to card-loading-content (#8528)

Author: HyperLife1119

components/card/card-loading.component.ts

@@ -26,9 +26,9 @@ import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/con
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { BooleanInput, NgStyleInterface, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 
 import { NzCardGridDirective } from './card-grid.directive';
-import { NzCardLoadingComponent } from './card-loading.component';
 import { NzCardTabComponent } from './card-tab.component';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
@@ -67,10 +67,10 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
     }
 
     <div class="ant-card-body" [ngStyle]="nzBodyStyle">
-      @if (!nzLoading) {
-        <ng-content />
+      @if (nzLoading) {
+        <nz-skeleton [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
       } @else {
-        <nz-card-loading />
+        <ng-content />
       }
     </div>
     @if (nzActions.length) {
@@ -94,7 +94,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
     '[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent',
     '[class.ant-card-rtl]': `dir === 'rtl'`
   },
-  imports: [NzOutletModule, NgTemplateOutlet, NgStyle, NzCardLoadingComponent],
+  imports: [NzOutletModule, NgTemplateOutlet, NgStyle, NzSkeletonModule],
   standalone: true
 })
 export class NzCardComponent implements OnDestroy, OnInit {

components/card/card.component.ts

@@ -7,20 +7,12 @@ import { BidiModule } from '@angular/cdk/bidi';
 import { NgModule } from '@angular/core';
 
 import { NzCardGridDirective } from './card-grid.directive';
-import { NzCardLoadingComponent } from './card-loading.component';
 import { NzCardMetaComponent } from './card-meta.component';
 import { NzCardTabComponent } from './card-tab.component';
 import { NzCardComponent } from './card.component';
 
 @NgModule({
-  imports: [NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent],
-  exports: [
-    BidiModule,
-    NzCardComponent,
-    NzCardGridDirective,
-    NzCardMetaComponent,
-    NzCardLoadingComponent,
-    NzCardTabComponent
-  ]
+  imports: [NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardTabComponent],
+  exports: [BidiModule, NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardTabComponent]
 })
 export class NzCardModule {}

components/card/card.module.ts

@@ -80,7 +80,9 @@ describe('card', () => {
     const card = fixture.debugElement.query(By.directive(NzCardComponent));
     fixture.detectChanges();
     expect(card.nativeElement.classList).toContain('ant-card-loading');
-    expect(card.nativeElement.querySelector('nz-card-loading').classList).toContain('ant-card-loading-content');
+    const skeleton = card.nativeElement.querySelector('nz-skeleton');
+    expect(skeleton).toBeTruthy();
+    expect(skeleton.classList).toContain('ant-skeleton-active');
   });
   it('should grid work', () => {
     const fixture = TestBed.createComponent(NzDemoCardGridCardComponent);

components/card/card.spec.ts

@@ -4,8 +4,7 @@
  */
 
 export * from './card-grid.directive';
-export * from './card.component';
-export * from './card.module';
-export * from './card-loading.component';
 export * from './card-meta.component';
 export * from './card-tab.component';
+export * from './card.component';
+export * from './card.module';