This is how i'm currently handling data fetching in my app:

import React, { useEffect } from 'react'
import { AmazonProduct } from '@//lib/types';
import API from '@//lib/api';
//import Client from './client';
import Client from './client'



export default async function Page({ params }: { params: any }) {

    const { id } = params

    const [response, response2] = await Promise.all([
        API.getProductByAmazonId(id),
        API.getProductAvailability(id)
    ]);

    const product: AmazonProduct = response.product;
    const isAvailable = response2.availability;



    return (
        <Client id={params.id} product={product} isAvailable={isAvailable}/>
    )
}

export async function generateStaticParams() {


    const response = await API.getAllProducts();
    const allProducts = response.products;


    return allProducts.map((product: any) => ({
        id: product.productId as string
    }))
}

export const revalidate = 30;

where client is the page that shows the product details, image etc. as well as interactive components like a quantity selector and an add to cart button.

I'm attempting to implement a load state for this page for pages that need time to fetch data and compile. as of now, when a user clicks a button to navigate to a product page that needs time to compile, they are just stuck on the same page then finally redirected when the compilation is done. I've tried using a suspense to show a loading state to the user, but to no avail.