Which @angular/* package(s) are relevant/related to the feature request?

compiler

Description

Hey there folks!

I was just taking a deep dive on the @defer and was thinking about some interactions and cases for the prefetch
where it would make sense to say that ...

Using the prefetch on viewport makes little sense as if the @placeholder is in the viewport already, and we have the bundle (prefetched) then it would be great to just display the lazy loaded component and use the on viewport trigger instead of the prefetch.

This means prefetch on viewport only makes sense when used with some target which appears before the actual @defer block but this is "work intense" and it is easy to forget to update targets when moving components around. Additionally, it also breaks the "self containment" of the @defer block as now we have to know both the @defer and the target to understand the full picture.

Because of that, it would be really cool to be able to specify something like prefetch on viewport(200) which would start prefetching 200px before @placeholder reaches the viewport!

This way the @defer block will be fully self contained and work even when moved around in the template of the component (or extracted to another component)

Proposed solution

Add support for offset (or other name) option for the on viewport(offset) and prefetch on viewport(offset) which will trigger lazy loading or prefetching before the target reaches the viewport. This could in theory work also with custom targets but the main use case is the default target, the @placeholder`.

Examples

@defer(on viewport(200)) { }

@defer(on viewport; prefetch on viewport(200)) { }
// this one is great as we could prefetch before viewport
// but NOT run the component until viewport (eg if it triggers backend requests etc...)

// optional goal
@defer(on viewport(target, 200) { } // offset for custom target

Alternatives considered

The main alternative is to specify target which appears on the page before manually but this is suboptimal as it's manual step that developer has to perform, manage and maintain.

Another alternative is to write a custom scroll / intersection observer based service and use it in prefetch when customViewportOffsetLogic