feat(client): add animations for better user experience

lareii · Sep 14, 2024 · 6e3168a · 6e3168a
1 parent c84343b
commit 6e3168a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/client/app/app/layout-content.jsx b/client/app/app/layout-content.jsx
@@ -15,22 +15,31 @@ export default function LayoutContent({ children }) {
   if (loading) return <Loading />;
 
   return (
-    <div className='flex max-w-screen-lg mx-auto gap-x-5 max-lg:flex-col lg:pt-14 lg:px-5'>
-      <Navbar />
-      {/* css calc -> max-w-screen-lg - navbar width - gap and paddings */}
-      <div className='w-full lg:max-w-[calc(1024px-240px-(3*1.25rem))] max-lg:p-5 pb-5'>
-        <AnimatePresence mode='wait'>
-          <motion.div
-            key={isUsersPage ? pathname.split('/')[3] : pathname.split('/')[2]}
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ ease: 'easeInOut', duration: 0.3 }}
-            className='w-full'
-          >
-            {children}
-          </motion.div>
-        </AnimatePresence>
-      </div>
-    </div>
+    <AnimatePresence mode='wait'>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ ease: 'easeInOut', duration: 0.3 }}
+        className='flex max-w-screen-lg mx-auto gap-x-5 max-lg:flex-col lg:pt-14 lg:px-5'
+      >
+        <Navbar />
+        {/* css calc -> max-w-screen-lg - navbar width - gap and paddings */}
+        <div className='w-full lg:max-w-[calc(1024px-240px-(3*1.25rem))] max-lg:p-5 pb-5'>
+          <AnimatePresence mode='wait'>
+            <motion.div
+              key={
+                isUsersPage ? pathname.split('/')[3] : pathname.split('/')[2]
+              }
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ ease: 'easeInOut', duration: 0.3 }}
+              className='w-full'
+            >
+              {children}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </motion.div>
+    </AnimatePresence>
   );
 }
diff --git a/client/components/app/Loading/index.jsx b/client/components/app/Loading/index.jsx
@@ -10,7 +10,6 @@ export default function Loading() {
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
         transition={{ ease: 'easeInOut', duration: 0.3 }}
         className='h-screen flex flex-col items-center justify-center'
       >