This is what I have:
function images takes a text and a second loading function:
async function images(text, loading)
the loading function returns image urls for like 10 sec every 2 sec
so i want it to look something like this:
await images("abc", (newUrl)=> {
imageUrl= newUrl;
revalidatePath("/"); // this doesnt update the page??
})

If I would be you, I would use a useState or something similar to states, when you want to update your page after a specific amount of time. It's like having a infinite scroll: your initial data is fetched serverside and passed to the client, where the client handles the rest. If the user scrolls more, more data will be loaded inside this state.

And same is in your case: after a specific amount of time, add the newUrl to your state and render it.

okay, but how can i update the useEffect now

"use client";
import Message, { MessageType } from "@/components/Message";
import { getMessages } from "@/lib/messages";
import { useEffect, useState } from "react";

export default function ChatBox() {
    const [messages, setMessages] = useState([] as MessageType[]);

    useEffect(() => {
        const fetchData = async () => {
            setMessages(await getMessages());
        };

        fetchData();
    }, [])

    return (
        <ul>
            {messages.map((msg: MessageType, index) => (
                <li key={msg.id}>
                    <Message message={msg}/>
                </li>
            ))}
        </ul>
    );
}

good, now create something like a repeating task. You can use for example the setInterval function. That function will be called every xms and you can do whatever you'd like to do inside that function. Then just push the new entries inside your messages array

@Cape lion solved?