Fade in window contents (Layout)

src-web/components/DefaultLayout.tsx

@@ -4,20 +4,24 @@ import { GlobalHooks } from './GlobalHooks';
 import { ToastProvider } from './ToastContext';
 import classNames from 'classnames';
 import { useOsInfo } from '../hooks/useOsInfo';
+import { motion } from 'framer-motion';
 
 export function DefaultLayout() {
   const osInfo = useOsInfo();
   return (
     <DialogProvider>
       <ToastProvider>
-        <div
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.1, delay: 0.1 }}
           className={classNames(
             'w-full h-full',
             osInfo?.osType === 'linux' && 'border border-background-highlight-secondary',
           )}
         >
           <Outlet />
-        </div>
+        </motion.div>
         <GlobalHooks />
       </ToastProvider>
     </DialogProvider>