Navigating between pages takes a few seconds

[mystic ivy]

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",

[obsidian rover]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[void light]

Is this a proper build or just local development?

[mystic ivy]

proper build. locally i understand some time is needed for the pages to compile but i've tried to next build + next start locally too and it's the same experience