With AI SDK UI- How to lazy load response

[Godrules500]

With RSC, I was able to get the loading indictaor to display immediately to the user because I replied to the user before processing the user's request (loading images, manipulating the messages, etc). Then as the AI responded, I would display it to the user. How can I do this with the AI SDK UI?

Essentially I want to do

async function submitUserMessage(content: any, fileNames: string[] = [], hideMessage: boolean = false) {
  let index = getMessageIndex(aiState)
  let textStream: undefined | ReturnType<typeof createStreamableValue<string>> = createStreamableValue('')
  const reply = createStreamableUI(<BotMessage content={textStream.value} isFinal={false} index={index} />)
  let id = generateId()

  // This lazy loads the processing of the user message allowing the spinner to come up more quickly.
  processUserMessage(content, fileNames, hideMessage, textStream, reply, id)
  return {
    id,
    display: reply.value
  }
}

ProcessUserMessage is where I load images, process the message, and submit it to Vertex AI

How do I create this exact setup with vercel ai sdk ui in a way that streamText will still display to the user once Gemini responds?

[Godrules500]

additional info. I can obviously not await it and it works, but the loading indicator doesn't show up until streamText starts responding still. So I essentially need a way to return a "fake" response, and then have streamText tie into it once it starts its thing.

[lgrammel]

You can check the loading state and create UI elements as needed when it loading. See this example: https://sdk.vercel.ai/docs/ai-sdk-ui/chatbot#loading-state

[Godrules500]

@lgrammel Oof, the way it is right now that I had with rsc is that the response immediately returns with an empty ai message, allowing the newly created bot message to have a spot in the chat list with a spinner, preventing me from having to have custom logic just for a spinner.

So there's no way to have it return immediately with an empty state? Meaning that when the user submits, let's say the first message, there is a count of 1 messages. The post returns immediately, but now we have a message count of 2 (2nd being an empty ai response) with a state of loading. Then the ai response fills in that new and empty message as the results stream in.