Next.js Discord

Discord Forum

Show Spinner before streamUI() call

Unanswered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
I'm using .streamUI as shown in this example repo from the docs: https://github.com/vercel/ai-chatbot/blob/901e4ccec1645a039bb5bbe3239d66d12a694803/lib/chat/actions.tsx#L131

const result = await streamUI({
    model: ...
    initial: <SpinnerMessage />,
    prompt: prompt,
    text: ...


Now I want to do some preprocessing on the prompt and then stream the UI. So I add a call above the streamUI one, but now the issue is my spinner is no longer showing. It only appears once the streamUI call starts. Can i somehow "manually" set the initial spinner prior to the streamUI call? I'd like to have something like:

// show spinner here already

const prompt = await expensivePreprocessing(...)

const result = await streamUI({
    model: ...
    initial: <SpinnerMessage />, // and not here
    prompt: prompt,
    text: ...


I have tried:
- adding a property isLoading to my aiState and updating it prior to calling streamUI, but that doesn't do anything, the aiState update does not reach my frontend before the streaming starts.
- trying streamText rather than streamUI
- optimistically adding the spinner first, the issue here is that then I have the spinner and the result message, even though I don't need them both

This seems like it should have a simple solution but I can't find it

0 Replies