javascript / intermediate
Snippet
Optimizing UI with @defer
The @defer block allows declarative lazy loading of heavy components based on triggers like scrolling into view or hovering.
snippet.js
javascript
1
2
3
4
5
6
7
@defer (on viewport) {<heavy-chart-component />} @placeholder {<div class="skeleton">Loading graph...</div>} @loading (after 100ms; minimum 500ms) {<app-spinner />}
angular
Breakdown
1
@defer (on viewport)
Triggers the download of the component only when it enters the user's visible area.
2
@placeholder
Displays static content immediately before the defer logic starts.
3
minimum 500ms
Ensures the loading state stays visible long enough to prevent flickering UI.