Simple animations (#4378)
parent
9557c1818b
commit
ef7863ad0b
|
@ -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={{
|
||||
|
|
|
@ -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} />
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue