fix: add default block padding to ghost elements

show border on each ghost element in case of cellMode is off and also hide outer ghost overlay if cellMode is on to avoid duplication.

Author: chintankavathia

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';