Skip to content

refactor!: avoid forced style recalculations on app-layout resize#11493

Merged
vursen merged 5 commits into
mainfrom
refactor/app-layout-resize-observer
Apr 20, 2026
Merged

refactor!: avoid forced style recalculations on app-layout resize#11493
vursen merged 5 commits into
mainfrom
refactor/app-layout-resize-observer

Conversation

@vursen

@vursen vursen commented Apr 16, 2026

Copy link
Copy Markdown
Contributor

Description

The PR consolidates a window resize listener and a separate ResizeObserver into a single ResizeObserver that reads values in the observer callback while DOM updates are deferred to requestAnimationFrame. This helps avoid forced style recalculations on app layout resize.

Before After
Screenshot 2026-04-16 at 15 25 55 Screenshot 2026-04-16 at 15 27 14

The screenshots show resizing the Starpass app before and after with 4x CPU throttle.

Warning

There is a small risk of this being a breaking change, as it it alters the timing of when attributes are set.

Type of change

  • Refactoring

vursen and others added 2 commits April 16, 2026 14:10
Replace the combination of window resize listener and separate
ResizeObserver with a single unified ResizeObserver that handles
all layout recalculation: overlay mode, touch-optimized mode,
drawer size, and offset sizes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Extract the unobserve/observe pattern into a __scheduleResize method
and coalesce multiple __onResize callbacks using cancelAnimationFrame.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vursen vursen changed the title refactor: use single ResizeObserver for app-layout sizing refactor: avoid forced reflows on app-layout resize Apr 16, 2026
@vursen vursen changed the title refactor: avoid forced reflows on app-layout resize refactor: avoid forced style recalculations on app-layout resize Apr 16, 2026
@vursen vursen changed the title refactor: avoid forced style recalculations on app-layout resize refactor!: avoid forced style recalculations on app-layout resize Apr 16, 2026
@vursen vursen force-pushed the refactor/app-layout-resize-observer branch from af5886a to 284749a Compare April 16, 2026 14:01
Comment thread packages/app-layout/src/vaadin-app-layout-mixin.js
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vursen vursen force-pushed the refactor/app-layout-resize-observer branch from a85c608 to a2df77e Compare April 17, 2026 08:08
@sonarqubecloud

Copy link
Copy Markdown

@vursen vursen requested review from web-padawan and removed request for DiegoCardoso April 20, 2026 08:48
@vursen vursen merged commit 0619c13 into main Apr 20, 2026
10 checks passed
@vursen vursen deleted the refactor/app-layout-resize-observer branch April 20, 2026 09:50
@vaadin-bot

Copy link
Copy Markdown
Collaborator

This ticket/PR has been released with Vaadin 25.2.0-alpha3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants