fix: ghost loaders height

projects/ngx-datatable/src/lib/components/body/body.component.ts

@@ -53,7 +53,7 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
         </div>
       </div>
     }
-    @if (ghostLoadingIndicator && (!rowCount || !virtualization || !scrollbarV)) {
+    @if (ghostLoadingIndicator && !rows.length && (!rowCount || !virtualization || !scrollbarV)) {
       <ghost-loader
         class="ghost-overlay"
         [columns]="columns"
@@ -352,7 +352,7 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
     this.recalcLayout();
   }
 
-  get bodyHeight() {
+  get bodyHeight(): string {
     return this._bodyHeight;
   }
 

projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html

@@ -1,8 +1,16 @@
-<div class="ghost-loader ghost-cell-container" [style.height.px]="ghostBodyHeight">
-  @for (item of [].constructor(pageSize); track item) {
-    <div class="ghost-element" [style.height.px]="rowHeight" [class.datatable-body-row]="cellMode">
-      @for (col of columns; track col) {
-        <div class="ghost-cell" [class.datatable-body-cell]="cellMode" [style.width.px]="col.width">
+<div class="ghost-loader ghost-cell-container" [style.height]="ghostBodyHeight()">
+  @for (item of [].constructor(pageSize()); track item) {
+    <div
+      class="ghost-element"
+      [style.height]="rowHeightComputed()"
+      [class.datatable-body-row]="cellMode()"
+    >
+      @for (col of columns(); track col) {
+        <div
+          class="ghost-cell"
+          [class.datatable-body-cell]="cellMode()"
+          [style.width.px]="col.width"
+        >
           @if (!col.ghostCellTemplate) {
             <div class="line ghost-cell-strip"></div>
           } @else {

projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.scss

@@ -33,6 +33,7 @@
   inset-block-start: 20px;
 
   .ghost-cell {
+    padding-block: 0.9rem;
     padding-inline: 1.2rem;
   }
 }

projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.ts

@@ -3,8 +3,8 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
-  Input,
-  numberAttribute
+  numberAttribute,
+  input
 } from '@angular/core';
 
 import { TableColumnInternal } from '../../../types/internal.types';
@@ -17,9 +17,17 @@ import { TableColumnInternal } from '../../../types/internal.types';
   imports: [NgTemplateOutlet]
 })
 export class DataTableGhostLoaderComponent {
-  @Input() columns!: TableColumnInternal[];
-  @Input({ transform: numberAttribute }) pageSize!: number;
-  @Input() rowHeight!: number | 'auto' | ((row?: any) => number);
-  @Input({ transform: numberAttribute }) ghostBodyHeight?: number;
-  @Input({ transform: booleanAttribute }) cellMode = false;
+  readonly columns = input.required<TableColumnInternal[]>();
+  readonly pageSize = input.required<number, unknown>({ transform: numberAttribute });
+  readonly rowHeight = input.required<number | 'auto' | ((row?: any) => number)>();
+  readonly ghostBodyHeight = input<string>();
+  readonly cellMode = input(false, { transform: booleanAttribute });
+
+  protected readonly rowHeightComputed = () => {
+    const rowHeight = this.rowHeight();
+    if (typeof rowHeight === 'function') {
+      return rowHeight() + 'px';
+    }
+    return rowHeight === 'auto' ? 'auto' : rowHeight + 'px';
+  };
 }

projects/ngx-datatable/src/lib/themes/_ghost.scss

@@ -9,6 +9,7 @@ $datatable-ghost-cell-strip-background-image: linear-gradient(
 ) !default;
 $datatable-ghost-cell-strip-radius: 4px !default;
 $datatble-ghost-cell-animation-duration: 10s;
+$datatable-ghost-row-border-color: #d9d8d9 !default;
 
 .ghost-cell-container {
   background: $datatable-ghost-cell-container-background;
@@ -20,3 +21,7 @@ $datatble-ghost-cell-animation-duration: 10s;
   border-radius: $datatable-ghost-cell-strip-radius;
   animation-duration: $datatble-ghost-cell-animation-duration;
 }
+
+.ghost-element {
+  border-block-end: 1px solid $datatable-ghost-row-border-color;
+}

projects/ngx-datatable/src/lib/themes/bootstrap.scss

@@ -10,6 +10,7 @@ $datatable-ghost-cell-strip-background-image: linear-gradient(
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
 $datatble-ghost-cell-animation-duration: 10s;
+$datatable-ghost-row-border-color: #d1d4d7 !default;
 
 @import './ghost';
 @import './rows';

projects/ngx-datatable/src/lib/themes/material.scss

@@ -80,6 +80,7 @@ $datatable-ghost-cell-strip-background-image: linear-gradient(
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
 $datatble-ghost-cell-animation-duration: 10s;
+$datatable-ghost-row-border-color: $datatable-body-row-border-bottom-color !default;
 
 @import './ghost';
 @import './rows';