update ui update and fix layout issue

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type {Metadata, Viewport} from 'next';
 import {Sora, Inter} from 'next/font/google';
 import './globals.css';
+import {getServerSession} from '@/features/auth/services/serverSession';
 import {Providers} from './providers';
 
 const sora = Sora({
@@ -43,7 +44,19 @@ export const viewport: Viewport = {
   themeColor: '#000000',
 };
 
-export default function RootLayout({children}: {children: React.ReactNode}) {
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  /**
+   * Resolved on the server so the client provider starts already knowing who
+   * it is. Without the seed, every full page load would paint a guard spinner
+   * while the browser asked `/api/auth/session` a question the server had
+   * already answered in this very request.
+   */
+  const session = await getServerSession();
+
   return (
     // The theme attributes are server-rendered so the @scope rules in
     // loyaly.css match on the very first byte — no flash from stock defaults.
@@ -55,7 +68,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       suppressHydrationWarning
     >
       <body>
-        <Providers>{children}</Providers>
+        <Providers initialSession={session}>{children}</Providers>
       </body>
     </html>
   );