From a9b79eafb6f91b89c99b51ffc58de27dc1c05a4d Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Sun, 11 Sep 2022 20:54:05 +0100
Subject: [PATCH] Add automanimate page transitions (#4368)

---
 apps/web/pages/v2/event-types/[type]/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/web/pages/v2/event-types/[type]/index.tsx b/apps/web/pages/v2/event-types/[type]/index.tsx
index 8246c08afc..962beaea5c 100644
--- a/apps/web/pages/v2/event-types/[type]/index.tsx
+++ b/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}>