refactor(mobile): render only mounted day slides
Merged
OC
2d ago+46+46+01234567890123456789-27-27-01234567890123456789
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 aDaySlide.
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:
| before | after | |
|---|---|---|
DayCarousel self render time in the select commit (CPU 4x) | 4.8 to 6.0 ms | 0.4 to 0.5 ms |
Whole select commit render time (CPU 4x) | 16.7 to 17.6 ms | 9.8 to 12.3 ms |
| Largest belt step between two frames (CPU 1x) | 11 px | 11 px |
Written by Claude Opus 5.5.
![Autofix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/autofix-with-codesmith-dark-3x.png)
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.