Part of the file list scroll performance work for #3159.
Current situation
In the tiles view a lazy placeholder tile is 4 px shorter than a hydrated one.
Measured on a 500-image folder, tiles size 3:
- placeholder tile: 220.5625 px
- hydrated tile: 224.5625 px
- grid: 4 columns x 125 auto-sized rows
The placeholder markup in packages/web-pkg/src/components/FilesList/ResourceTile.vue does not reproduce the hydrated tile's box exactly.
Why this is bad
Every reveal grows its grid row and pushes everything below it down. While scrolling, content moves under the user's finger and the scroll position drifts. Each reveal also invalidates layout for the whole 500-item grid.
Proposed solution
- Make the placeholder exactly the height of a hydrated tile.
- Pin the grid row height so revealing a tile cannot resize its row.
Verification
Placeholder and hydrated tile report the same getBoundingClientRect().height. Scroll position stays stable while tiles fill in - no cumulative shift.
Part of the file list scroll performance work for #3159.
Current situation
In the tiles view a lazy placeholder tile is 4 px shorter than a hydrated one.
Measured on a 500-image folder, tiles size 3:
The placeholder markup in
packages/web-pkg/src/components/FilesList/ResourceTile.vuedoes not reproduce the hydrated tile's box exactly.Why this is bad
Every reveal grows its grid row and pushes everything below it down. While scrolling, content moves under the user's finger and the scroll position drifts. Each reveal also invalidates layout for the whole 500-item grid.
Proposed solution
Verification
Placeholder and hydrated tile report the same
getBoundingClientRect().height. Scroll position stays stable while tiles fill in - no cumulative shift.