How do i create a loading state for this page?
Unanswered
cnow posted this in #help-forum

cnowOP
This is how i'm currently handling data fetching in my app:
where
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.
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
you can see the fetching in the code snippet i sent earlier

@B33fb0n3 You said you tried suspense. Did you tried the use of „loading.js“
Is the fetching clientside or serverside?

cnowOP
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

@cnow 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

You tried that only in dev mode or also in production?

@B33fb0n3 You tried that only in dev mode or also in production?

cnowOP
Attempted in dev, i can try in prod right now
give me a moment

like so right?

@cnow Click to see attachment

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>
}
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

How do you navigate the client? Thought < Link>, useRouter, a-Tag, …?

cnowOP

it's done using <Link>

Hmmmm… looks good as well. Can you create a minimal repro repo? For example via jsfiddle or https://codesandbox.io/ ?

@cnow?