From dee5ee170d48e02ebc6e16055ec55bb433b08a8b Mon Sep 17 00:00:00 2001
From: Chintan Kavathia <chintankumar.kavathia@siemens.com>
Date: Thu, 3 Jul 2025 12:40:44 +0530
Subject: [PATCH] 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.
---
 .../src/lib/components/body/body.component.ts |  4 ++--
 .../ghost-loader/ghost-loader.component.html  | 18 ++++++++++-----
 .../ghost-loader/ghost-loader.component.scss  |  1 +
 .../ghost-loader/ghost-loader.component.ts    | 22 +++++++++++++------
 .../ngx-datatable/src/lib/themes/_ghost.scss  |  5 +++++
 .../src/lib/themes/bootstrap.scss             |  1 +
 .../src/lib/themes/material.scss              |  1 +
 7 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index 27acadbdf..c34f41e30 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/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;
   }
 
diff --git a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html b/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html
index e772fcb2d..e95045e9c 100644
--- a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html
+++ b/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 {
diff --git a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.scss b/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.scss
index de3601ed8..586f60f2c 100644
--- a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.scss
+++ b/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;
   }
 }
diff --git a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.ts b/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.ts
index bad0835c7..7bd7dd16e 100644
--- a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.ts
+++ b/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';
+  };
 }
diff --git a/projects/ngx-datatable/src/lib/themes/_ghost.scss b/projects/ngx-datatable/src/lib/themes/_ghost.scss
index 9ebe3a38d..14b92432f 100644
--- a/projects/ngx-datatable/src/lib/themes/_ghost.scss
+++ b/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;
+}
diff --git a/projects/ngx-datatable/src/lib/themes/bootstrap.scss b/projects/ngx-datatable/src/lib/themes/bootstrap.scss
index 8ffa3112c..72af543bd 100644
--- a/projects/ngx-datatable/src/lib/themes/bootstrap.scss
+++ b/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';
diff --git a/projects/ngx-datatable/src/lib/themes/material.scss b/projects/ngx-datatable/src/lib/themes/material.scss
index 434ce419b..56f0cd8ba 100644
--- a/projects/ngx-datatable/src/lib/themes/material.scss
+++ b/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';