how can I display a loading state / show UI when awaiting data in an async component?

[cerulean basalt]

I have a route /chat/[id], this route awaits data in when loaded in and also handles some logic if the chat is new or not. The logic inside the If searchParams block is causing too much delay before anything displays

Here is my file (cut some unnecessary code for post length):

type props = {
    params:{
        id: string
    },
    searchParams: { [key: string]: string | undefined } 
}


export default async function Page(props: props) {

    const messages = await drizzle query

    if(props.searchParams["new"] && props.searchParams["message"]){
        const messageId = props.searchParams["message"];
        const req = await fetch("http://localhost:3000/api/message", {
            method: "POST",
        });

        const res = await req.json();

        if(res.success){
            revalidatePath(`/chat/${props.params.id}`);
            revalidatePath("/")
            redirect(`/chat/${props.params.id}`);
        }
    }

    
    async function sendMessage(formData: FormData) {
        "use server"
        const message = formData.get("message");
            if (message) {
                const req = await fetch("http://localhost:3000/api/message", {
                    method: "POST",
                    }
                const data = await req.json();
                if(data.success){
                    revalidatePath(`/chat/${props.params.id}`);
                }
            }
    }

    return(
       <Messages messages={messages}/>
        <form action={sendMessage}/>
    )

}

[viral vigil]

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)

[pearl marsh]

use loading.tsx or <Suspense />

import { Suspense } from "react";

type props = {
    params:{
        id: string
    },
    searchParams: { [key: string]: string | undefined } 
}


export default async function Page(props: props) {

    async function sendMessage(formData: FormData) {
        "use server"
        const message = formData.get("message");
            if (message) {
                const req = await fetch("http://localhost:3000/api/message", {
                    method: "POST",
                    }
                const data = await req.json();
                if(data.success){
                    revalidatePath(`/chat/${props.params.id}`);
                }
            }
    }

    return(
        <>
        <Suspense key={JSON.stringify(searchParams)} fallback={<div>loading...</div>}>
            <MessagesContainer searchParams={searchParams} />
        </Suspense>
        <form action={sendMessage}/>
        </>
    )

}

async function MessagesContainer(props) {
    const messages = await drizzle query

    if(props.searchParams["new"] && props.searchParams["message"]){
        const messageId = props.searchParams["message"];
        const req = await fetch("http://localhost:3000/api/message", {
            method: "POST",
        });

        const res = await req.json();

        if(res.success){
            revalidatePath(`/chat/${props.params.id}`);
            revalidatePath("/")
            redirect(`/chat/${props.params.id}`);
        }
    }

    return  <Messages messages={messages}/>
}

[cerulean basalt]

do i change params to be a global variable? messagesContainer doesnt have access to it

[pearl marsh]

async function MessagesContainer(props) {}

i forgot that

[cerulean basalt]

tyty ill try

[cerulean basalt]

perfect that worked, is it ok if you give me a little rundown of what happened im a bit unfamiliar with how next handles awaiting data

[pearl marsh]

if you wrap a server component with suspense, next will not wait for rendering that component instead, it will send it to client with streaming

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming

[cerulean basalt]

thanks! ill take a look