You can lazy-load any standalone component anywhere, anytime, and on your terms, as you can decide the trigger to load that component.
The above code will load the HelloComponent as soon as the browser is idle, which means it's done loading everything else. While that is happening, we can decide to display a placeholder, and in my case, I decided that such a placeholder would be displayed for a minimum of 2 seconds no matter what. You can use seconds (s) or milliseconds (ms) as a time unit:
We can also specify a loading template and an error template, all customizable with a minimum amount of time during which we would display those templates:
Note that @loading supports an "after " option only to show the loading template if loading takes more than a certain amount of time, so you don't have to display anything if the component loads quickly. Both parameters are optional:
These are the different new blocks available with @defer
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs
- dev.to: https://dev.to/nhannguyendevjs
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs
Top comments (0)