From ef7863ad0b06669887ee806b5eeaeaf195aaa35f Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 12 Sep 2022 11:15:30 +0100
Subject: [PATCH] Simple animations (#4378)

---
 apps/web/pages/v2/availability/index.tsx | 12 +++++++++++-
 apps/web/pages/v2/bookings/[status].tsx  | 12 ++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/web/pages/v2/availability/index.tsx b/apps/web/pages/v2/availability/index.tsx
index 5b5be8c11f..280eec5ad1 100644
--- a/apps/web/pages/v2/availability/index.tsx
+++ b/apps/web/pages/v2/availability/index.tsx
@@ -1,3 +1,6 @@
+import autoAnimate from "@formkit/auto-animate";
+import { useRef, useEffect } from "react";
+
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
@@ -13,6 +16,7 @@ import SkeletonLoader from "@components/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"]);
 
@@ -28,6 +32,12 @@ 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]);
+
   return (
     <>
       {schedules.length === 0 ? (
@@ -41,7 +51,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
         </div>
       ) : (
         <div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
-          <ul className="divide-y divide-neutral-200" data-testid="schedules">
+          <ul className="divide-y divide-neutral-200" data-testid="schedules" ref={animationParentRef}>
             {schedules.map((schedule) => (
               <ScheduleListItem
                 displayOptions={{
diff --git a/apps/web/pages/v2/bookings/[status].tsx b/apps/web/pages/v2/bookings/[status].tsx
index 0779627798..47a80d63d1 100644
--- a/apps/web/pages/v2/bookings/[status].tsx
+++ b/apps/web/pages/v2/bookings/[status].tsx
@@ -1,6 +1,7 @@
+import autoAnimate from "@formkit/auto-animate";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
-import { Fragment } from "react";
+import { Fragment, useEffect, useRef } from "react";
 import { z } from "zod";
 
 import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
@@ -43,6 +44,8 @@ export default function Bookings() {
     getNextPageParam: (lastPage) => lastPage.nextCursor,
   });
 
+  // Animate page (tab) tranistions to look smoothing
+  const animationParentRef = useRef(null);
   const buttonInView = useInViewObserver(() => {
     if (!query.isFetching && query.hasNextPage && query.status === "success") {
       query.fetchNextPage();
@@ -79,9 +82,14 @@ export default function Bookings() {
     }
     return true;
   };
+
+  useEffect(() => {
+    animationParentRef.current && autoAnimate(animationParentRef.current);
+  }, [animationParentRef]);
+
   return (
     <BookingLayout heading={t("bookings")} subtitle={t("bookings_description")}>
-      <div className="flex w-full flex-1 flex-col">
+      <div className="flex w-full flex-1 flex-col" ref={animationParentRef}>
         {query.status === "error" && (
           <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
         )}