Pagination: ignore layout measurements taken before the theme CSS is applied

[EugeniyKiyashko]

No description provided.

[Copilot]

Copilot review overview

🟡 Changes recommended

An idle explicitly compact pagination retains its fallback width after theme CSS loads.

Review effort: Balanced
Findings: 1

Open (1)

• Refresh compact pagination width when theme CSS becomes ready · New

What changed in this PR

Prevents pagination adaptivity from using measurements captured before theme CSS loads.

Changes:

• Detects whether themed pagination layout is applied.
• Recalculates adaptivity and compact page-index width after updates.
• Adds Jest and QUnit regression coverage.

File	Description
pagination.tests.js	Adds CSS-loading regression tests.
get_element_width.ts	Adds block-layout detection.
resizable_container.tsx	Defers measurements and observes theme readiness.
pages/​small.tsx	Rechecks minimum width after prop changes.
resizable-container.test.ts	Tests layout detection and adaptivity.
pages-small.test.ts	Tests compact index-width recalculation.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Note

Copilot was unable to run its full agentic suite in this review.

Copilot review overview

Review effort: Lite
Findings: 1 · 4 · 1

Open (6)

• isPendingThemeLoaded() handling appears inverted: when the theme is still pending, this returns… · New
• These tests create Pagination instances but never dispose them; with the new theme-ready… · New
• Including the entire this.props object in effect dependencies will likely cause updateWidth to… · New
• The new onThemeReady utility is a central coordination point for multiple components, but it has… · New
• Refresh compact pagination width when theme CSS becomes ready
• Using float as a variable name can be confusing given it’s also a well-known type/term; renaming… · New

[Copilot]

Copilot review overview

🔵 Needs a closer look

The readiness check misses info-only pagination, allowing an unstyled width to be cached permanently.

Review effort: Balanced
Findings: None

Resolved since last review (6)

• isPendingThemeLoaded() handling appears inverted: when the theme is still pending, this returns…
• The new onThemeReady utility is a central coordination point for multiple components, but it has…
• Including the entire this.props object in effect dependencies will likely cause updateWidth to…
• These tests create Pagination instances but never dispose them; with the new theme-ready…
• Refresh compact pagination width when theme CSS becomes ready
• Using float as a variable name can be confusing given it’s also a well-known type/term; renaming…

Previously missed (1)

In code that hasn't changed since last review

Include infoTextRef when checking layout readiness

packages/​devextreme/​js/​__internal/​pagination/​resizable_container.tsx:42

isLayoutApplied overlooks the info element. With the supported combination pageSize: 0, showInfo: true, and no page-size selector, both checked refs are absent, so an unstyled .dx-info block is measured and cached as the full parent width. The first update then hides the info, and the theme-ready update cannot remeasure it because its ref is gone, leaving it hidden even at a wide width. Include infoTextRef in this readiness check (the themed .dx-info is inline-block) and cover this info-only configuration.

[Copilot]

Copilot review overview

🔵 Needs a closer look

Info-only pagination can still cache an unstyled measurement and permanently hide its info text.

Review effort: Balanced
Findings: None

Previously missed (1)

In code that hasn't changed since last review

Include infoTextRef in pager layout readiness checks

packages/​devextreme/​js/​__internal/​pagination/​resizable_container.tsx:42

When the pager contains only the info text (for example, showInfo: true with the “all” page size, where pageSize === 0 suppresses the page-index selector), both checked refs are absent, so this returns true even before CSS is applied. The unstyled .dx-info is then measured as a full-width block, infoTextVisible becomes false, and its cached width prevents the info text from returning after theme readiness. Include infoTextRef in this layout-readiness check so this valid info-only layout also ignores its unstyled measurement.

[Copilot]

Copilot review overview

🟢 Approval recommended

The implementation addresses delayed theme styling with focused lifecycle handling and comprehensive regression coverage.

Review effort: Balanced
Findings: None

[Copilot]

Copilot review overview

🟢 Approval recommended

The implementation addresses delayed CSS measurements and provides focused regression coverage for each affected path.

Review effort: Balanced
Findings: None

[Copilot]

Copilot review overview

🟢 Approval recommended

The measurement guards, theme-ready updates, cleanup behavior, and relevant regressions are comprehensively covered.

Review effort: Balanced
Findings: None