Like we have an easy way to implement a loading component in App routes, what can I use with Pages routes? I tried using suspense, useEffect, and next/dynamic. What is the best way to accomplish this? For example, I'm building an e-commerce website and I am using getServerSideProps to fetch the products. I dynamically imported all components that have products and assigned them a loading state. However, when I first enter the webpage, there is a significant delay before anything is displayed on the screen.

const Main = dynamic(() => import("../components/home/main"), {
loading: () => (
<div className="mt-[10px]">
<Skeleton
highlightColor="#9ca3af"
baseColor="#E3E0F3"
className="h-[430px]"
/>
</div>
),
});

export async function getServerSideProps() {
db.connectDb();
let products = await Product.find()
.sort({ createdAt: -1 })
.populate({
path: "category",
model: Category,
})
.lean();

return {
props: {
products: JSON.parse(JSON.stringify(products)),
},
};
}