more styles

src/features/core/components/layout.tsx

@@ -1,5 +1,6 @@
-import { AppShell } from '@mantine/core';
+import { AppShell, Box } from '@mantine/core';
 import { PropsWithChildren } from 'react';
+import { useLocation } from '@tanstack/react-router';
 import Header from './header';
 import Navbar from './navbar';
 import Pullable from './pullable';
@@ -11,6 +12,7 @@ import './route-transition.css';
 const Layout: React.FC<PropsWithChildren> = ({ children }) => {
   const { header, withPadding, fullWidth } = useRouterConfig();
   const viewport = useVisualViewportSize();
+  const location = useLocation();
 
   return (
     <AppShell
@@ -48,7 +50,9 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       >
         <Pullable>
           <Page noPadding={!withPadding} fullWidth={fullWidth}>
-            {children}
+            <Box key={location.pathname} className="flxn-route-enter">
+              {children}
+            </Box>
           </Page>
         </Pullable>
       </AppShell.Main>