small fixes and animate side panel content

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) => {