Added enter animation, added loading and error state to conversations and communities, updated other small stuff

apps/web/src/routes/app/layout.tsx

@@ -5,6 +5,8 @@ import Sidebar from "@/components/sidebar";
 import Navbar from "@/components/navbar";
 import { useStorage } from "@tensamin/storage/context";
 
+import { motion } from "framer-motion";
+
 /**
  * Executes Layout.
  * @param props Parameter props.
@@ -46,7 +48,20 @@ export default function Layout(props: { children: ReactNode }) {
   }
 
   return (
-    <div className="w-full h-full flex bg-sidebar">
+    <motion.div
+      className="w-full h-full flex bg-sidebar"
+      initial={{ y: -40, scale: 0.95, borderRadius: "1rem" }}
+      animate={{ y: 0, scale: 1, borderRadius: 0 }}
+      transition={{
+        borderRadius: { duration: animationTiming.first, ease: "easeOut" },
+        y: { duration: animationTiming.first, ease: "easeOut" },
+        scale: {
+          delay: animationTiming.first,
+          duration: animationTiming.second,
+          ease: "easeOut",
+        },
+      }}
+    >
       <Sidebar />
       <div className="w-full h-full flex flex-col">
         <Navbar />
@@ -54,6 +69,11 @@ export default function Layout(props: { children: ReactNode }) {
           {props.children}
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 }
+
+const animationTiming = {
+  first: 0.18,
+  second: 0.1,
+};