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
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
@cnow This is how i'm currently handling data fetching in my app: ts 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.
Avatar
You said you tried suspense. Did you tried the use of „loading.js“

Is the fetching clientside or serverside?
you can see the fetching in the code snippet i sent earlier
Avatar
@B33fb0n3 You said you tried suspense. Did you tried the use of „loading.js“ Is the fetching clientside or serverside?
Avatar
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
Attempted in dev, i can try in prod right now
give me a moment
Image
like so right?
Avatar
@cnow Click to see attachment
Avatar
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>
}
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
How do you navigate the client? Thought < Link>, useRouter, a-Tag, …?
Avatar
Image
it's done using <Link>
Avatar
Hmmmm… looks good as well. Can you create a minimal repro repo? For example via jsfiddle or https://codesandbox.io/ ?
Avatar
@cnow?