ui phase 12

client/src/layout/CustomerLayout.tsx

@@ -2,7 +2,7 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import { Badge, Box, Stack, Tab, Tabs } from '@mui/material';
 import { useTranslations } from 'next-intl';
-import { AppIcon, AppIconButton, ErrorBoundary } from '@/components';
+import { AppIcon, AppIconButton, ErrorBoundary, RouteFadeIn } from '@/components';
 import { NotificationBell } from '@/components/notifications';
 import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
@@ -138,7 +138,7 @@ const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
               body={tChrome('error_body')}
               retryLabel={tChrome('error_retry')}
             >
-              {children}
+              <RouteFadeIn>{children}</RouteFadeIn>
             </ErrorBoundary>
           </Box>
         </Box>

client/src/layout/FocusedLayout.tsx

@@ -2,7 +2,7 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import { useTranslations } from 'next-intl';
 import { Stack } from '@mui/material';
-import { AppIcon, ErrorBoundary } from '@/components';
+import { AppIcon, ErrorBoundary, RouteFadeIn } from '@/components';
 
 /**
  * Chrome-free shell for a focused, can't-tab-away flow — today only first-run onboarding
@@ -27,7 +27,7 @@ const FocusedLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
           body={tChrome('error_body')}
           retryLabel={tChrome('error_retry')}
         >
-          {children}
+          <RouteFadeIn>{children}</RouteFadeIn>
         </ErrorBoundary>
       </Stack>
     </Stack>

client/src/layout/PublicLayout.tsx

@@ -2,7 +2,7 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import { useTranslations } from 'next-intl';
 import { Stack } from '@mui/material';
-import { AppIcon, ErrorBoundary } from '@/components';
+import { AppIcon, ErrorBoundary, RouteFadeIn } from '@/components';
 import LocaleSwitcher from '@/components/common/LocaleSwitcher';
 import { DarkModeToggleButton } from './components/DarkModeButton';
 
@@ -36,7 +36,7 @@ const PublicLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
           body={tChrome('error_body')}
           retryLabel={tChrome('error_retry')}
         >
-          {children}
+          <RouteFadeIn>{children}</RouteFadeIn>
         </ErrorBoundary>
       </Stack>
     </Stack>

client/src/layout/TopBarAndSideBarLayout.tsx

@@ -2,7 +2,7 @@
 import { FunctionComponent, PropsWithChildren, ReactNode, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Box, Stack, useTheme } from '@mui/material';
-import { AppIconButton, ErrorBoundary } from '@/components';
+import { AppIconButton, ErrorBoundary, RouteFadeIn } from '@/components';
 import { LinkToPage } from '@/utils';
 import { TopBar } from './components';
 import SideBar from './components/SideBar';
@@ -91,7 +91,7 @@ const TopBarAndSideBarLayout: FunctionComponent<PropsWithChildren<Props>> = ({
             body={tChrome('error_body')}
             retryLabel={tChrome('error_retry')}
           >
-            {children}
+            <RouteFadeIn>{children}</RouteFadeIn>
           </ErrorBoundary>
         </Stack>
       </Stack>