stuck radish
Managing Layout Shifts and Trigger Chaining with Angular Deferrable Views (@defer on viewport)
When implementing @defer (on viewport) for a vertical stack of components (e.g., Banners, Carousels, and Product Grids), I’ve encountered an issue where the initial small size of the @placeholder triggers the Intersection Observer for multiple deferred blocks simultaneously.
Since the placeholders don't occupy the same vertical space as the eventual component, the browser detects that subsequent components are 'in the viewport' and begins loading them immediately, defeating the purpose of lazy loading.
What is the best practice for managing this? Should I strictly enforce a fixed height on my placeholders to match the final component dimensions, or is there a more flexible architectural pattern to prevent this 'false positive' intersection trigger?
red cosmos