Next.js Discord

Discord Forum

Strange request is there a proper way to add (Fake Loading on a next 14 Server component)

Unanswered
South Polar Skua posted this in #help-forum
Open in Discord
South Polar SkuaOP
I want to stimulate a page load like (2 seconds) so I can show a spinning animation on page load of a NextJS website

7 Replies

Use a timeout with a promise:
const ServerComponent = async () => {
  await new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
  return <YourComponents />;
}
Pretty sure if it's a nodejs runtime you can also use timers/promises
@D Trombett Use a timeout with a promise: tsx const ServerComponent = async () => { await new Promise((resolve) => { setTimeout(resolve, 2000); }); return <YourComponents />; }
South Polar SkuaOP
Hey, thanks for the tip! It worked perfectly in development, but when I built the page, it loaded instantly without the expected delay. So, I added
export const revalidate = 0
And now, it's working like a charm!
Yeah didn't think to mention the cache, sorry!
@South Polar Skua Hey, thanks for the tip! It worked perfectly in development, but when I built the page, it loaded instantly without the expected delay. So, I added `export const revalidate = 0` And now, it's working like a charm!
Also a handy tip is to use your browsers debug options to reduce your network speed. Thats generally how I do debugging with simulated load times.
Yeah that works too, sadly it doesn't help for server side loading