I am working in Next.js 14 with NextUI and Next-Auth v4. My web app is a dashboard with a sidebar on the left hand side with various buttons. I am using the standard routing method in Next.js (page.tsx in folders). Whenever you click a button on the sidebar to navigate to a different page in the dashboard, the session is checked and the buttons on the sidebar drop to a skeleton element whilst the session status is ‘loading’. Is there a way to keep the sidebar intact on routing without just implementing a single-page application and dropping all of the routing?

I tried showing the full UI whilst in the ‘loading’ session state, but this is not correct as the UI shows before the user is fully authenticated the first time they enter the dashboard. I also tried pushing the sidebar into an inner layout.tsx file, but the session is checked one every page navigation and so it makes on difference.