In the addMessages function is a onProgress function. When the onProgress function gets called, there should be new changes on my homepage. So i revalidate the Path on Progress, but the page doesnt update. the page will only update on the revalidatePath after addMessage returns a Promise.

my homepage:

import ChatBox from "@/components/ChatBox";
import ChatInput from "@/components/ChatInput";
import { addMessage, getMessages } from "@/lib/messages";
import { revalidatePath } from "next/cache";

export default async function Home() {
  const messages = await getMessages();

  const sendText = async (formData: FormData) => {
    "use server";
    const text= formData.get("text") as string;
    await addMessage(text, async (uri, progress) => {
      revalidatePath("/");
    });
    revalidatePath("/");
  };

  return (
    <div>
      <h1>Chat App</h1>
      <ChatBox messages={messages} />
      <ChatInput sendText={sendText} />
    </div>
  );
}

/lib/messages.tsx:

"use server";
import { MessageType } from "@/components/Message";
import { doSomething } from "@/lib/something";

let messages: MessageType[] = [];
let id = 0;

export async function addMessage(message: string, onProgress: (uri: any, progress: any) => void){
  console.log("Adding message: ", message);
  const currId = id++;
  messages.push({ id: currId, text: message, image_url: "", progress: "" });
  onProgress("", "0%");
  await doSomething(message, (uri, progress) => {
    const msg = getMessage(currId);
    if (msg) {
      msg.image_url = uri;
      msg.progress = progress;
      onProgress(uri, progress);
    }
  }).then((message) => {
    const msg = getMessage(currId);
    if (msg) {
      msg.hash = message!.hash;
      msg.progress = "100%";
      msg.image_url = message!.proxy_url ?? "";
    }
  });
}

export async function getMessages() {
  return messages;
}

function getMessage(id: number): MessageType | undefined {
  return messages.find((msg) => msg.id === id);
}