simple route change animations

src/app/router.tsx

@@ -25,6 +25,7 @@ export function createRouter() {
       defaultPreload: 'intent',
       defaultErrorComponent: DefaultCatchBoundary,
       scrollRestoration: true,
+      defaultViewTransition: true
     }),
     queryClient,
   )

src/app/routes/_authed.tsx

@@ -1,4 +1,4 @@
-import { Outlet, redirect, createFileRoute } from "@tanstack/react-router";
+import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
 import Layout from "@/features/core/components/layout";
 import { useServerEvents } from "@/hooks/use-server-events";
 

src/features/core/components/animated-outlet.tsx

@@ -1,31 +0,0 @@
-import { Outlet, useRouter } from '@tanstack/react-router';
-import { AnimatePresence, motion } from 'framer-motion';
-
-const AnimatedOutlet = () => {
-  const router = useRouter();
-  
-  return (
-    <AnimatePresence mode="wait">
-      <motion.div
-        key={router.state.location.pathname}
-        initial={{ x: '100%', opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: '-100%', opacity: 0 }}
-        transition={{
-          type: 'tween',
-          duration: 0.3,
-          ease: 'easeInOut'
-        }}
-        style={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%'
-        }}
-      >
-        <Outlet />
-      </motion.div>
-    </AnimatePresence>
-  );
-}
-
-export default AnimatedOutlet;

src/features/core/components/navbar.tsx

@@ -10,8 +10,6 @@ const Navbar = () => {
   const isMobile = useIsMobile();
   const links = useLinks(user?.id, roles);
 
-  console.log('rendered')
-
   if (isMobile) return (
     <Paper component='nav' role='navigation' withBorder radius='lg' h='4rem' w='calc(100% - 2rem)' shadow='sm' pos='fixed' m='1rem' bottom='0' style={{ zIndex: 10 }}>
       <Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>