Show loader.tsx content without removing the current page's elements during route change

[eloraa]

import { Spinner } from '@/components/ui/spinners';

export default function Loading() {
  return (
    <div className="fixed inset-0 bg-background/20 backdrop-blur-2xl saturate-200 flex items-center justify-center">
      <Spinner className="size-10" />
    </div>
  );
}

I'm trying to create an acrylic effect on the loader, but currently, while the loader is displayed, the contents of the current page are removed. Is there any way to prevent this behavior? The page contents should only be removed after the loading is finished, which works when there is no loader. The user stays on the current page while data is loading, changing only after the data finishes loading.

[icyJoseph]

I think you might want to use a different approach here. Maybe:

• https://nextjs.org/blog/next-15-3#navigation-hooks

You can also use useTransition's isPending state, so when the user "queues" up a route change, you show your acrylic effect, and then when the route change commits and complets, the isPending flag is set to false, and you can remove the acrylic effect.