small fixes and animate side panel content

src/components/ApprovalWorkflows/UserWithProfilePic.tsx

@@ -17,7 +17,7 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
                 alt={name}
                 width={24}
                 height={24}
-                className="w-6 h-6 rounded-full"
+                className="rounded-full"
             />
         </div>
     );

src/pages/approval-workflows/[id].tsx

@@ -23,6 +23,7 @@ import { ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 import Tip from "@/components/ApprovalWorkflows/Tip";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -149,9 +150,19 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                         ))}
                     </section>
 
+                    {/* Side panel */}
+                    <AnimatePresence mode="wait">
+                        <LayoutGroup key="sidePanel">
                             <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-2/5' : 'w-0'}`}>
-                        {isPanelOpen && (
+                                {isPanelOpen && selectedStep && (
-                            <div className="relative inset-y-0 right-0 h-full p-6">
+                                    <motion.div
+                                        className="p-6"
+                                        key={selectedStep.stepNumber}
+                                        initial={{ opacity: 0, x: 30 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        exit={{ opacity: 0, x: 30 }}
+                                        transition={{ duration: 0.2 }}
+                                    >
                                         <div className="flex flex-row gap-2">
                                             <p className="text-2xl font-medium text-left align-middle">Step {selectedStepIndex + 1}</p>
                                             <div className="ml-auto flex flex-row">
@@ -246,9 +257,11 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                             </button>
 
                                         </div>
-                            </div>
+                                    </motion.div>
                                 )}
                             </section>
+                        </LayoutGroup>
+                    </AnimatePresence>
                 </Layout>
             )}
         </>

src/pages/approval-workflows/create.tsx

@@ -55,6 +55,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [isAdding, setIsAdding] = useState(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
 
     useEffect(() => {
         if (entityId) {
@@ -88,6 +89,9 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     };
 
     const handleAddNewWorkflow = () => {
+        if (isAdding) return;
+        setIsAdding(true);
+
         const newId = uuidv4();
         const newWorkflow: EditableApprovalWorkflow = {
             id: newId,
@@ -104,6 +108,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
         handleSelectWorkflow(newId);
+
+        setTimeout(() => setIsAdding(false), 300);
     };
 
     const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {