Happy New Year!!!🥳 In the last article, I told you about how I added page loading functionality using simple true and false loading states. When a page is opened and data is being fetched the loading state is set to true and the loading indicator appears on the screen. When the data has been fetched the loading state is set to false and the loading indicator disappears. When testing this functionality it looked very sluggish, the loading indicator was delayed and didn’t always disappear after the page content had completely loading. I did some research and found that suspense loading was a better way of producing the same results that work and look better. In this article, I talk about how I setup loading functionality using suspense loading.
Page loading functionality using suspense loading⏱
Suspense loading allows you to display some loading UI from the server while the content of the page loads. This is done by placing the server component whose content requires loading in-between suspense tags. The suspense tags have a fallback prop that is used to define which component we what to use as the loading screen. I created a simple loading component for now which just displays the word “loading…”, I’ll work on making the component look pretty later on😅. The code below shows how this was done.
import { Suspense } from "react";
import Loading from '@/app/components/loading';
import MyComponent from '@/app/components/mycomponent';
export default function LoadingFunctionality(){
return(
<Suspense fallback={<Loading/>}>
<MyComponent/>
</Suspense>
)
}With this essential functionality complete I’m now a huge step closer to completing the Whinst web app. Thank you for reading🙏.