"Loading..." when using Nextjs Loader (App Router)

angelo_hague · October 20, 2025, 4:09pm

When loading pages with the NextJS Loader (using app routes), components and pages are delayed by a “Loading…” text.

Is it possible to add a skeleton in place of these “Loading…” text outputs, as this is resulting in a lot of Cumulative Layout Shift on our site.

Or can we prevent this completely? Pages ideally should be SSG, but I believe this loading state may come from the client hydration step?

muhammad_asim · October 20, 2025, 8:48pm

Hey @angelo_hague

To provide a custom fallback UI, you can pass suspenseFallback prop to PlasmicRootProvider component as follow

export function PlasmicClientRootProvider(
  props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">
) {
  return (
    <PlasmicRootProvider
      loader={PLASMIC}
      suspenseFallback={<h1 style={{ color: "red" }}>Loading...</h1>}
      {...props}
    ></PlasmicRootProvider>
  );
}

Additionally, the SSR support is currently limited for App Router, if it’s important for you, we recommend using Pages Router.

Thanks