The websites these days are becoming more and more complex. And we have to load things in parts sometimes as micro components. Or maybe lazy loading some components just to better user experience. When we do this we need to create loader for heavy components that is replaced with the component once it is loaded. It is quite an overhead to manage this loader and its loading states. What NextJS v13 did with its new Loading UI feature is that you create a loading.js file and nextjs will take care of managing the loader and its states.
Loading.js
Just like you have module.scss file convention that allows next to support scss out of the box. With v13 NextJS introduced loading.js which will act as your fallback UI or loader. But, what you need to understand is that this won’t worker between route changes. As in NextJS route changes are instant and doesn’t require waiting. In order to use this feature. All you need to do is create a file loading.tsx and add your code for spinner, or any form of loader that you wish to display. Save the file and you are ready to go.
You can also define suspense boundaries for your loading.js. This is a new feature launched recently. You won’t find much tutorials on this. So, if you do fall into trouble and have problem implementing loading.js. You can just come and comment right here. I will respond ASAP.
Be First to Comment