Local loading with RSC
Unanswered
Champagne D’Argent posted this in #help-forum
Champagne D’ArgentOP
Hello!
I am developing an app where on the left part (its only one page) I have a list of elements which will be added by filling in the right part of the app (it's a form), I do it with Nextjs so for the part left I used the server actions it is rehydrated after the form call is done. How can I put a loader only on the left part during rehydration so that the user understands that we are indeed loading data? (I can't use the loading.tsx page, and the <Suspense> doesn't seem to work, it doesn't detect the refetch of the data)...
I searched the docs but it doesn't really enlighten me on this level, I would need a loader at the local level and not the global level of the page
An idea ?
I am developing an app where on the left part (its only one page) I have a list of elements which will be added by filling in the right part of the app (it's a form), I do it with Nextjs so for the part left I used the server actions it is rehydrated after the form call is done. How can I put a loader only on the left part during rehydration so that the user understands that we are indeed loading data? (I can't use the loading.tsx page, and the <Suspense> doesn't seem to work, it doesn't detect the refetch of the data)...
I searched the docs but it doesn't really enlighten me on this level, I would need a loader at the local level and not the global level of the page
An idea ?
9 Replies
Plott Hound
When you tried suspense was your fetch inside the suspense boundary?
Champagne D’ArgentOP
yes I have something like that
but Suspense works for first call but when it's refetch en rehydrate that doesnt show the loader
@Plott Hound
<Suspense fallback={<Loader />}>
<FetchHistory />
</Suspense>but Suspense works for first call but when it's refetch en rehydrate that doesnt show the loader
@Plott Hound
@Champagne D’Argent yes I have something like that
<Suspense fallback={<Loader />}>
<FetchHistory />
</Suspense>
but Suspense works for first call but when it's refetch en rehydrate that doesnt show the loader
<@578864362882727958>
Plott Hound
sounds like its being cached after the first request. is this sidebar showing stale data?
@Plott Hound sounds like its being cached after the first request. is this sidebar showing stale data?
Champagne D’ArgentOP
My FetchHistory look like this:
@Giant panda the HistoryList are client component but all parent component of it are server component
export default async function FetchHistory() {
const session = await getServerSession(authConfig);
if (!session) return <></>;
const posts = await prisma.postHistory.findMany({
where: { userId: session.user.id },
include: { posts: true },
orderBy: { created: "desc" },
});
return <HistoryList posts={posts} />;
}@Giant panda the HistoryList are client component but all parent component of it are server component
That load correctly new items when I created new one but the loader doesn't display
Giant panda
you can use useTransition hook during creation
@Giant panda you can use useTransition hook during creation
Champagne D’ArgentOP
I don't have the state of the request when its refetch or fetch, it's made with a server component so I can't create hook for know the state
Champagne D’ArgentOP
My last solution it's to switch the call to client side for know the state of call and refetch when I need