feat(ag-grid-angular-theme): added KbqAgGridLoadingOverlay, KbqAgGridSkeletonCellRenderer directives (#DS-4937)

[artembelik]

No description provided.

[github-actions]

Visit the preview URL for this PR (updated for commit 4c43df6):

https://data-grid-next--data-grid-pr-174-o77fabf5.web.app

_{(expires Tue, 09 Jun 2026 14:30:42 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b9d49913f5b5988e9af8690a8b37f16143707448}

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[artembelik]

/approve-snapshots

[github-actions]

🔄 Updating snapshots.

[github-actions]

✅ Snapshots updated!

[Copilot]

Pull request overview

Adds a skeleton-based loading experience for ag-grid-angular within the @koobiq/ag-grid-angular-theme package, including a reusable loading overlay directive/component pair, a skeleton cell renderer for Infinite Row Model, theme styles, and dev + test coverage to validate visuals and behavior.

Changes:

• Introduced KbqAgGridLoadingOverlay directive + KbqAgGridLoadingOverlayComponent with optional DI-based configuration (rows/cols).
• Added KbqAgGridSkeletonCellRenderer for Infinite Row Model placeholders and corresponding theme SCSS for skeleton visuals.
• Added unit tests and Playwright e2e/screenshot tests, plus dev routes/pages demonstrating overlay and lazy-loading skeletons.

Reviewed changes

Copilot reviewed 13 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/ag-grid-angular-theme/tests/loading-overlay.ng.spec.ts	Unit tests for directive behavior and overlay component rendering/config.
packages/ag-grid-angular-theme/src/theme.scss	Adds skeleton renderer + loading overlay styling and disables row interaction during skeleton rendering.
packages/ag-grid-angular-theme/src/skeleton-cell-renderer.ng.ts	Adds Angular loading cell renderer component for infinite row model skeletons.
packages/ag-grid-angular-theme/src/module.ng.ts	Exposes the new loading overlay directive via the theme module exports.
packages/ag-grid-angular-theme/src/loading-overlay.ng.ts	Implements the loading overlay directive, component, and configuration provider/token.
packages/ag-grid-angular-theme/index.ts	Exports the new overlay and skeleton renderer APIs from the package entrypoint.
dev/ag-grid-angular/src/tests/loading-overlay.playwright-spec.ts	Playwright coverage for overlay visibility/toggling + screenshot assertions.
dev/ag-grid-angular/src/tests/loading-overlay.ng.ts	Dev demo component for the loading overlay feature (with config provider).
dev/ag-grid-angular/src/tests/lazy-loading.playwright-spec.ts	Playwright coverage for skeleton cells appearing/disappearing during infinite scrolling.
dev/ag-grid-angular/src/tests/lazy-loading.ng.ts	Dev demo component for infinite model skeleton cell renderer usage.
dev/ag-grid-angular/src/row-data.ts	Adds a signal-based IDatasource factory used by the lazy-loading dev demo.
dev/ag-grid-angular/src/overview.ng.ts	Adds overview toggle + wiring to demonstrate the loading overlay in the main dev overview.
dev/ag-grid-angular/src/main.ts	Adds dev routes for the new loading-overlay and lazy-loading demo pages.

[artembelik]

@rmnturov посмори пожалуйста

lazy loading + skeleton:
https://data-grid-next--data-grid-pr-174-o77fabf5.web.app/e2e/lazy-loading

loading overlay + skeleton:
https://data-grid-next--data-grid-pr-174-o77fabf5.web.app/e2e/loading-overlay

[NikGurev]

KbqAgGridSkeletonCellRenderer — missing refresh() implementation

KbqAgGridSkeletonCellRenderer implements ILoadingCellRendererAngularComp but does not implement refresh(). AG Grid calls refresh() on a cell renderer before destroying and recreating it — if the method is absent, AG Grid falls back to destroying and re-rendering the component, which is fine functionally but wastes a DOM cycle.

More importantly, with the Infinite Row Model, AG Grid can call refresh() on a loading-row cell renderer when the block status transitions from loading → loaded. If refresh() is not present (or returns true), AG Grid may attempt to reuse the skeleton component for the now-loaded row instead of swapping it out, causing a flash of stale content.

Returning false explicitly signals "do not reuse me, re-render fresh":

export class KbqAgGridSkeletonCellRenderer implements ILoadingCellRendererAngularComp {
    agInit(_params: ILoadingCellRendererParams): void {}

    refresh(): boolean {
        return false;
    }
}

Relevant AG Grid docs:

• Cell Renderer — refresh method
• Loading Cell Renderer
• Infinite Row Model