refactor(mobile): render only mounted day slides

Merged
OC
2d ago
+46-27

The daily carousel rendered one div per day in its 181-day window on every selection change, and mounted a DaySlide in the three near the selection.

This PR splits the two:

  • One empty cell per day, memoized on the day window. Embla snaps to these through slides: '[data-day-cell]'. They re-render only when the window re-anchors.
  • An absolutely positioned slide for each mounted day only, placed over its cell with left: index * 100%. The key is still the day, so a re-anchor does not remount a DaySlide.

No behaviour change. The swipe works the same way, and each mounted slide gets a data-day attribute.

Measurements

Headless Chromium, mobile shell, 9 daily notes with 150 lines each, one swipe to the next day:

beforeafter
DayCarousel self render time in the select commit (CPU 4x)4.8 to 6.0 ms0.4 to 0.5 ms
Whole select commit render time (CPU 4x)16.7 to 17.6 ms9.8 to 12.3 ms
Largest belt step between two frames (CPU 1x)11 px11 px

Written by Claude Opus 5.5.


Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

Summary by Sourcery

Reduce daily mobile carousel rendering overhead without changing its swipe or navigation behavior.

Enhancements:

  • Separate Embla’s day navigation cells from the mounted day slides so selection changes reconcile only the nearby slides and preserve slide instances across window re-anchoring.
  • Configure Embla to snap against the memoized day cells while exposing mounted slides with day metadata.

Summary by CodeRabbit

  • Improvements
    • The day carousel now keeps a consistent cell for every day, helping maintain stable positioning as you move between dates.
    • Only slides near the selected day are mounted, while the carousel continues to track all day cells and re-measure them when re-anchored.