lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix card click delay when reduced motion is active

Browse Source
This commit is contained in:
lashman
2026-02-16 18:51:35 +02:00
parent f80a3d5d0e
commit 10176f8968
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/card-detail/CardDetailModal.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from "react"; 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 { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { useBoardStore } from "@/stores/board-store"; import { useBoardStore } from "@/stores/board-store";
@@ -25,6 +25,8 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
const updateCard = useBoardStore((s) => s.updateCard); const updateCard = useBoardStore((s) => s.updateCard);
const open = cardId != null && card != null; const open = cardId != null && card != null;
const prefersReducedMotion = useReducedMotion();
const instant = { duration: 0 };
return ( return (
<AnimatePresence> <AnimatePresence>
@@ -36,7 +38,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.2 }} transition={prefersReducedMotion ? instant : { duration: 0.2 }}
onClick={onClose} onClick={onClose}
/> />
@@ -46,9 +48,12 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
onClick={onClose} onClick={onClose}
> >
<motion.div <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" 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()} onClick={(e) => e.stopPropagation()}
> >
<EscapeHandler onClose={onClose} /> <EscapeHandler onClose={onClose} />