Streaming and UI flicker
Unanswered
Blue orchard bee posted this in #help-forum
Blue orchard beeOP
Hi, quick question: how should I handle a situation where I'm using streaming but the data loads so fast that there's a flicker between the fallback and the final content? For example, the Suspense fallback only shows for about 5 ms because the data arrives almost immediately.
6 Replies
hmm.. remove the loading ui? at that point there is no reason to use loading ui anymore. you've achieved peak performance haha
Pacific sand lance
you can throttle loader
something like display fallback for atleast 300ms
@Pacific sand lance something like display fallback for atleast 300ms
but thats only possible in client side right? how would you do that with Suspense?
Pacific sand lance
something like that will work server-side
async function throttlePromise<T>(promise: Promise<T>, delay: number): Promise<T> {
const start = performance.now();
const data = await Promise.resolve(promise);
const remaining = Math.max(delay - (performance.now() - start), 0);
if (remaining > 0) {
await new Promise(r => setTimeout(r, remaining));
}
return data as T;
}and then for example
still, it introduces more complexity in codebase
const data = await throttlePromise(getUsers(...), 300);still, it introduces more complexity in codebase