Next.js Discord

Discord Forum

How do i create a loading state for this page?

Unanswered
cnow posted this in #help-forum
Open in Discord
Avatar
cnowOP
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.

17 Replies

Avatar
B33fb0n3
You said you tried suspense. Did you tried the use of „loading.js“

Is the fetching clientside or serverside?
Avatar
cnowOP
serverside
you can see the fetching in the code snippet i sent earlier
I tried that but it didn't work, when i clicked a button to navigate to the page it would just stay on the same page then take me to the page when the compilation was done
Avatar
B33fb0n3
You tried that only in dev mode or also in production?
Avatar
cnowOP
Attempted in dev, i can try in prod right now
give me a moment
Image
like so right?
Avatar
B33fb0n3
Name it with a lowercase „l“ and add this code to it:

export default function Loading() {
// Or a custom loading skeleton component
return <p>Loading...</p>
}
Avatar
cnowOP
no luck
again, when i click the button to navigate to a dynamic route that hasnt been compiled before, i remain on the same page until its done compiling or whatever, then i get sent to the page
Avatar
B33fb0n3
How do you navigate the client? Thought < Link>, useRouter, a-Tag, …?
Avatar
cnowOP
Image
it's done using <Link>
Avatar
B33fb0n3
Hmmmm… looks good as well. Can you create a minimal repro repo? For example via jsfiddle or https://codesandbox.io/ ?
Avatar
B33fb0n3
@cnow?