Reactjs – How to add a default loading state in SSR pages in Nextjs?

I am creating a Single Page Application on Nextjs 13, using the pages directory. I have exported a getServerSideProps() in one of the pages which passes some fetched data to the props. I found that the data fetching takes 2-3 seconds during which the page loads. I want to provide some loading state UI until this page is getting rendered server side. How can I do that efficiently?

I tried to use router events like some other solutions but those do not get triggered if the route is directly opened (or in case of home route being server rendered).

Here is a simplified code for the server side props fetching:

export async function getServerSideProps() {
  try {
    //fetching data 
    return {
      props: { data: //fetched data },
    };
  } catch (e) {
    console.error(e);
  }
}