fix card click delay when reduced motion is active
Skip layoutId and use instant transitions on the card detail modal when reduced motion is on. The shared layout animation kept the z-50 overlay in the DOM during its exit spring, blocking all card clicks until it settled.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
||||
import { X } from "lucide-react";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
@@ -25,6 +25,8 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
|
||||
const updateCard = useBoardStore((s) => s.updateCard);
|
||||
|
||||
const open = cardId != null && card != null;
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
const instant = { duration: 0 };
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
@@ -36,7 +38,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
transition={prefersReducedMotion ? instant : { duration: 0.2 }}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
@@ -46,9 +48,12 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
|
||||
onClick={onClose}
|
||||
>
|
||||
<motion.div
|
||||
layoutId={`card-${cardId}`}
|
||||
layoutId={prefersReducedMotion ? undefined : `card-${cardId}`}
|
||||
className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
|
||||
transition={springs.gentle}
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : undefined}
|
||||
animate={prefersReducedMotion ? { opacity: 1 } : undefined}
|
||||
exit={prefersReducedMotion ? { opacity: 0 } : undefined}
|
||||
transition={prefersReducedMotion ? instant : springs.gentle}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<EscapeHandler onClose={onClose} />
|
||||
|
||||
Reference in New Issue
Block a user