refactor: use the useAnimate hook (#5103)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,10 +1,9 @@
-// Get router variables
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventType } from "@prisma/client";
 import * as Popover from "@radix-ui/react-popover";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { useReducer, useEffect, useMemo, useState, useRef } from "react";
+import { useReducer, useEffect, useMemo, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";
@@ -48,6 +47,8 @@ import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
+// Get router variables
+
 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   const router = useRouter();
   const path = router.asPath.split("/");
@@ -129,11 +130,8 @@ const SlotPicker = ({
   const { date, setQuery: setDate } = useRouterQuery("date");
   const { month, setQuery: setMonth } = useRouterQuery("month");
   const router = useRouter();
-  const slotPickerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    slotPickerRef.current && autoAnimate(slotPickerRef.current);
-  }, [slotPickerRef]);
+  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
 
   useEffect(() => {
     if (!router.isReady) return;

apps/web/components/v2/eventtype/EventAdvancedTab.tsx

@@ -1,8 +1,8 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
@@ -51,12 +51,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
 
-  const animationRef = useRef(null);
   const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");
 
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
+  const [animationRef] = useAutoAnimate<HTMLUListElement>();
 
   const removeCustom = (index: number) => {
     formMethods.getValues("customInputs").splice(index, 1);

apps/web/components/v2/eventtype/EventLimitsTab.tsx

@@ -1,7 +1,7 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useFormContext, Controller, useWatch } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
@@ -311,12 +311,9 @@ type BookingLimitsKey = keyof BookingLimit;
 const BookingLimits = () => {
   const { watch, setValue, control } = useFormContext<FormValues>();
   const watchBookingLimits = watch("bookingLimits");
-  const animateRef = useRef(null);
   const { t } = useLocale();
 
-  useEffect(() => {
-    animateRef.current && autoAnimate(animateRef.current);
-  }, [animateRef]);
+  const [animateRef] = useAutoAnimate<HTMLUListElement>();
 
   const BOOKING_LIMIT_OPTIONS: {
     value: keyof BookingLimit;

apps/web/components/v2/eventtype/EventSetupTab.tsx

@@ -1,8 +1,8 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import { z } from "zod";
 
@@ -85,11 +85,8 @@ export const EventSetupTab = (
 
   const Locations = () => {
     const { t } = useLocale();
-    const animationRef = useRef(null);
 
-    useEffect(() => {
-      animationRef.current && autoAnimate(animationRef.current);
-    }, [animationRef]);
+    const [animationRef] = useAutoAnimate<HTMLUListElement>();
 
     const validLocations = formMethods.getValues("locations").filter((location) => {
       const eventLocation = getEventLocationType(location.type);

apps/web/pages/availability/index.tsx

@@ -1,5 +1,4 @@
-import autoAnimate from "@formkit/auto-animate";
-import { useRef, useEffect } from "react";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -16,7 +15,6 @@ import SkeletonLoader from "@components/v2/availability/SkeletonLoader";
 export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const animationParentRef = useRef(null);
 
   const meQuery = trpc.useQuery(["viewer.me"]);
 
@@ -50,9 +48,8 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
   });
 
   // Adds smooth delete button - item fades and old item slides into place
-  useEffect(() => {
-    animationParentRef.current && autoAnimate(animationParentRef.current);
-  }, [animationParentRef]);
+
+  const [animationParentRef] = useAutoAnimate<HTMLUListElement>();
 
   return (
     <>

apps/web/pages/bookings/[status].tsx

@@ -1,7 +1,7 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
-import { Fragment, useEffect, useRef } from "react";
+import { Fragment } from "react";
 import { z } from "zod";
 
 import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
@@ -46,7 +46,7 @@ export default function Bookings() {
   });
 
   // Animate page (tab) tranistions to look smoothing
-  const animationParentRef = useRef(null);
+
   const buttonInView = useInViewObserver(() => {
     if (!query.isFetching && query.hasNextPage && query.status === "success") {
       query.fetchNextPage();
@@ -73,9 +73,7 @@ export default function Bookings() {
     return true;
   };
 
-  useEffect(() => {
-    animationParentRef.current && autoAnimate(animationParentRef.current);
-  }, [animationParentRef]);
+  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
     <BookingLayout heading={t("bookings")} subtitle={t("bookings_description")}>

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

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -106,13 +106,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
   // TODO: It isn't a good idea to maintain state using setEventType. If we want to connect the SSR'd data to tRPC, we should useQuery(["viewer.eventTypes.get"]) with initialData
   // Due to this change, when Form is saved, there is no way to propagate that info to eventType (e.g. disabling stripe app doesn't allow recurring tab to be enabled without refresh).
   const [eventType, setEventType] = useState(dbEventType);
-  const animationParentRef = useRef(null);
+
   const router = useRouter();
   const { tabName } = querySchema.parse(router.query);
 
-  useEffect(() => {
-    animationParentRef.current && autoAnimate(animationParentRef.current);
-  }, [animationParentRef]);
+  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
 
   const updateMutation = trpc.useMutation("viewer.eventTypes.update", {
     onSuccess: async ({ eventType: newEventType }) => {

packages/app-store/_components/AppCard.tsx

@@ -1,6 +1,5 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
-import { useEffect, useRef } from "react";
 
 import { inferQueryOutput } from "@calcom/trpc/react";
 import { Switch } from "@calcom/ui/v2";
@@ -24,11 +23,7 @@ export default function AppCard({
   children?: React.ReactNode;
   setAppData: SetAppDataGeneric<typeof eventTypeAppCardZod>;
 }) {
-  const animationRef = useRef(null);
-
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
+  const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
     <div ref={animationRef} className="mb-4 mt-2 rounded-md border border-gray-200 p-8 text-sm">

packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx

@@ -1,6 +1,6 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { App_RoutingForms_Form } from "@prisma/client";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray } from "react-hook-form";
 import { UseFormReturn } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
@@ -197,11 +197,7 @@ const FormEdit = ({
     name: fieldsNamespace,
   });
 
-  const animationRef = useRef(null);
-
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
+  const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   const addField = () => {
     appendHookFormField({

packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx

@@ -1,6 +1,6 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { App_RoutingForms_Form } from "@prisma/client";
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import React, { useState, useCallback } from "react";
 import { Query, Config, Builder, Utils as QbUtils } from "react-awesome-query-builder";
 // types
 import { JsonTree, ImmutableTree, BuilderProps } from "react-awesome-query-builder";
@@ -326,11 +326,8 @@ const Routes = ({
 
     return transformRoutes().map((route) => deserializeRoute(route, config));
   });
-  const animationRef = useRef(null);
 
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
+  const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   const mainRoutes = routes.filter((route) => !route.isFallback);
   let fallbackRoute = routes.find((route) => route.isFallback);

packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx

@@ -1,5 +1,4 @@
-import autoAnimate from "@formkit/auto-animate";
-import React, { useEffect, useRef } from "react";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { Props } from "react-select";
 
 import { classNames } from "@calcom/lib";
@@ -24,11 +23,8 @@ export const CheckedTeamSelect = ({
   onChange: (value: readonly CheckedSelectOption[]) => void;
 }) => {
   const { t } = useLocale();
-  const animationRef = useRef(null);
 
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
+  const [animationRef] = useAutoAnimate<HTMLUListElement>();
 
   return (
     <>

packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx

@@ -1,5 +1,3 @@
-import autoAnimate from "@formkit/auto-animate";
-import React, { useEffect, useRef } from "react";
 import { components, GroupBase, Props, ValueContainerProps } from "react-select";
 
 import { Icon } from "@calcom/ui/Icon";
@@ -37,11 +35,6 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
 
 export const MultiDropdownSelect = ({ options = [], value = [], ...props }: Props) => {
   // const { t } = useLocale();
-  const animationRef = useRef(null);
-
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
 
   return (
     <Select

packages/ui/v2/modules/tips/Tips.tsx

@@ -1,5 +1,5 @@
-import autoAnimate from "@formkit/auto-animate";
-import { useEffect, useState, useRef } from "react";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
@@ -34,11 +34,7 @@ const tips = [
 ];
 
 export default function Tips() {
-  const animationRef = useRef(null);
-
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current, { duration: 250, easing: "ease-out" });
-  }, [animationRef]);
+  const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   const { t } = useLocale();