How can I show a loading state in my client component while the server component updates?

[wary forge]

i am familiar with the pattern of lifting state up to the URL so that the queryParams force some sort of refetch in the server component, but what patterns exist to show a loading state while the server component is re-fetching?

[tired herald]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lime forum]

do you use server action?

[wary forge]

the server page (e.g. app/hello-world/[...thing]/page.tsx) is calling a server function, e.g.

export default async function Page({
  params: { thing },
  searchParams
}: PageProps) {
  // this is a server action
  const data = await getServerData(searchParams, thing)
  return (
    <ClientComponent data={data} />
  )
}

not sure if that answers your question! im relatively newer to the app router and the patterns that are "newer" in next14, so lmk if i should be learning about something else in particular

[lone moss]

you can use the loading.tsx to show a loading state for your page.

Your server request is one request from the client and the client will only see the clientcomponent (your children), after the serverside request is finished. So there isn't any way to serve it before. However: you can serve a different (loading) page to show a loading animation while the server gets the data (that's why I mentioned loading.tsx)

[wary forge]

@lone moss interesting! does it allow for cases like this?

export default async function Page({
  params: { thing },
  searchParams
}: PageProps) {
  // this is a server action
  const data = await getServerData(searchParams, thing)
  return (
    <>
      <ClientComponent data={data} />
      <AnotherClientComponent />
    </>
  )
}

where i can show a loading state for just ClientComponent? or does the loading state show for the entire page? (this is a very simplified example ofc)

[lone moss]

Your server request is one request from the client and the client will only see the clientcomponent (your children), after the serverside request is finished. So there isn't any way to serve it before. However: you can serve a different (loading) page to show a loading animation while the server gets the data (that's why I mentioned loading.tsx)

[wary forge]

oooo ok, thanks for that (in a meeting rn so i only glossed over your msg)

[lone moss]

it's fine 🙂
Take a look at the loading.js and it will solve your problem mostly

[desert agate]

If AnotherClientComponent is completely independent and doesn't need anything from data, you can just use Suspense directly. Just move the data fetching lower, add a suspense boundary :

const ServerComponent = async () => {
  const data = await fetch()
  return <div>{...}</div>
}

export default async function Page({
  params: { thing },
  searchParams
}: PageProps) {
  return (
    <>
      <Suspense fallback={<Spinner />}>
        <ServerComponent />
      </Suspense>
      <AnotherClientComponent />
    </>
  )
}

the key thing to know about loading.tsx is it just wraps your page.tsx in something like the above. If you do this, on initial render the user will see AnotherClientComponent rendered and then when the fetch call succeeds, the result will be streamed in and replace your fallback with the actual component. Hope that helps! Lmk if you have any other questions.