Add automanimate page transitions (#4368)

apps/web/pages/v2/event-types/[type]/index.tsx

@@ -1,7 +1,8 @@
+import autoAnimate from "@formkit/auto-animate";
 import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
@@ -95,9 +96,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
   const { t } = useLocale();
 
   const { eventType, locationOptions, team, teamMembers } = props;
-
+  const animationParentRef = useRef(null);
   const router = useRouter();
   const { tabName } = querySchema.parse(router.query);
+
+  useEffect(() => {
+    animationParentRef.current && autoAnimate(animationParentRef.current);
+  }, [animationParentRef]);
+
   const updateMutation = trpc.useMutation("viewer.eventTypes.update", {
     onSuccess: async ({ eventType }) => {
       showToast(
@@ -230,7 +236,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
           });
         }}
         className="space-y-6">
-        {tabMap[tabName]}
+        <div ref={animationParentRef}>{tabMap[tabName]}</div>
         {!TABS_WITHOUT_ACTION_BUTTONS.includes(tabName) && (
           <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
             <Button href="/event-types" color="secondary" tabIndex={-1}>