fix: add loading spinner for dynamic table paginator

[Junjiequan]

Description

Added a loading spinner to the dynamic paginator that appears when the facet request is in a pending state.
Currently, this feature is applied only to the datasets and proposals components, as they are the only two components that require facets at the moment.

The example clip uses a 2-second delay on the facets response to mimic a real-world scenario where the facets response is slow.

Screenshare.-.2026-06-02.10_26_06.AM.mov

Motivation

Background on use case, changes needed

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Add loading-state support to dynamic tables and facet-count fetches so paginators show a spinner while counts are being loaded.

New Features:

• Expose an isLoading flag in dynamic table pagination and render a spinner in the paginator range label when data is loading.

Bug Fixes:

• Track facet count loading state for datasets and proposals and wire it into dataset and proposal tables so pagination reflects ongoing facet-count fetches.

Enhancements:

• Refactor dataset and proposal table subscriptions to combine loading, count, user, and column-setting streams for more consistent table initialization behavior.

[sourcery-ai]

Hey - I've left some high level feedback:

• In DatasetTableComponent, getTablePaginationConfig now requires an isLoading argument whereas the proposals version makes it optional with a default; consider aligning the signatures (e.g., isLoading = false) to avoid forcing all call sites to pass a value and keep the API consistent.
• The new combined stream in DatasetTableComponent (this.datasets$.pipe(combineLatestWith(..., this.selectColumnsWithFetchedSettings$.pipe(filter(...))))) will now re-run initTable every time datasets, user, counts, or facet loading state change, whereas previously the column settings were taken once; if repeated reinitialization is unnecessary or expensive, consider limiting the settings stream with take(1) or distinctUntilChanged and separating it from frequently changing data.
• The .paginator-container/.paginator-container.is-loading styles use a generic class name and ::ng-deep on the paginator range label, which can bleed into other paginators using the same class; consider scoping the selector more tightly to the dynamic table component (e.g., via :host or a more specific class) to avoid unintended global styling.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In DatasetTableComponent, `getTablePaginationConfig` now requires an `isLoading` argument whereas the proposals version makes it optional with a default; consider aligning the signatures (e.g., `isLoading = false`) to avoid forcing all call sites to pass a value and keep the API consistent.
- The new combined stream in DatasetTableComponent (`this.datasets$.pipe(combineLatestWith(..., this.selectColumnsWithFetchedSettings$.pipe(filter(...))))`) will now re-run `initTable` every time datasets, user, counts, or facet loading state change, whereas previously the column settings were taken once; if repeated reinitialization is unnecessary or expensive, consider limiting the settings stream with `take(1)` or `distinctUntilChanged` and separating it from frequently changing data.
- The `.paginator-container`/`.paginator-container.is-loading` styles use a generic class name and `::ng-deep` on the paginator range label, which can bleed into other paginators using the same class; consider scoping the selector more tightly to the dynamic table component (e.g., via `:host` or a more specific class) to avoid unintended global styling.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull request overview

Adds a loading state for facet count fetches and surfaces it as a spinner in the dynamic table paginator's range label for datasets and proposals.

Changes:

• Track facetCountsIsLoading in datasets and proposals state (set on fetch start, cleared on complete/failed) with corresponding selectors.
• Add isLoading to TablePagination and render a CSS spinner on the paginator range label in the dynamic table when loading.
• Refactor DatasetTableComponent and ProposalTableComponent subscriptions to combine the new loading stream and pass it into pagination config.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/app/state-management/state/{datasets,proposals}.store.ts	Add facetCountsIsLoading field and initial value.
src/app/state-management/reducers/{datasets,proposals}.reducer.ts	Handle fetchFacetCounts start/complete/failed to toggle loading flag.
src/app/state-management/selectors/{datasets,proposals}.selectors.ts	New selectXFacetCountsIsLoading selector; rename selectProposalsfacetCounts → selectProposalsFacetCounts.
src/app/state-management/selectors/{datasets,proposals}.selectors.spec.ts	Add facetCountsIsLoading: false to mock initial states.
src/app/shared/modules/dynamic-material-table/models/table-pagination.model.ts	Add optional isLoading field.
src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.{html,scss}	Wrap paginators in container with .is-loading class and add CSS spinner.
src/app/datasets/dataset-table/dataset-table.component.ts	Refactor combined subscription; pass isLoading to pagination; spec updated.
src/app/datasets/dataset-table/dataset-table.component.spec.ts	Update getTablePaginationConfig call to include isLoading argument.
src/app/proposals/proposal-table/proposal-table.component.ts	Combine isFacetCountsLoading$ into subscription; pass to pagination config.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.