I am using App Router and I have a few different settings pages in my app. I have a layout like this

I have a layout.tsx in the settings folder with a navigation component that has a few Link components. Each page folder has a page.tsx and it is either a server component or a client component using tanstack query.

And i have a loading.tsx for each one of the pages that looks like this

import LoadingSettings from '@/components/settings/loading-settings';

export default function LoadingProfile() {
  return <LoadingSettings />;
}

which is just a few skeleton components.

When i click to navigate to a different page, there's a 2-3 second delay before showing the actual content of the page, not rendering the loading screen sometimes. am i doing something wrong? this is hosted on vercel

"next": "^14.2.5",