From 228d947a8420f2c3a105162dc373267115be574d Mon Sep 17 00:00:00 2001 From: Hailey Date: Sat, 13 Apr 2024 10:28:53 -0700 Subject: [PATCH] Fade in animation for card (#3521) * fade in and out the card one more fix dont leave an invisible card behind okay just about there move styles glitch clear hide timeouts on card enter about there * Tweak timings * Rewrite with explicit states --------- Co-authored-by: Dan Abramov --- bskyweb/templates/base.html | 11 ++ src/components/ProfileHoverCard/index.web.tsx | 166 +++++++++++------- web/index.html | 10 ++ 3 files changed, 128 insertions(+), 59 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 34e5901069..cb0cea24b4 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -235,6 +235,17 @@ inset:0; animation: rotate 500ms linear infinite; } + + @keyframes avatarHoverFadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + + @keyframes avatarHoverFadeOut { + from { opacity: 1; } + to { opacity: 0; } + } + {% include "scripts.html" %} diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx index d0e1b58ee4..9683244a6f 100644 --- a/src/components/ProfileHoverCard/index.web.tsx +++ b/src/components/ProfileHoverCard/index.web.tsx @@ -1,11 +1,11 @@ import React from 'react' import {View} from 'react-native' -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {makeProfileLink} from '#/lib/routes/links' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' @@ -51,97 +51,144 @@ export function ProfileHoverCard(props: ProfileHoverCardProps) { return isTouchDevice ? props.children : } +type State = 'hidden' | 'might-show' | 'showing' | 'might-hide' | 'hiding' + +const SHOW_DELAY = 350 +const SHOW_DURATION = 300 +const HIDE_DELAY = 200 +const HIDE_DURATION = 200 + export function ProfileHoverCardInner(props: ProfileHoverCardProps) { - const [hovered, setHovered] = React.useState(false) + const [state, setState] = React.useState('hidden') const {refs, floatingStyles} = useFloating({ middleware: floatingMiddlewares, }) - const prefetchProfileQuery = usePrefetchProfileQuery() + const animationStyle = { + animation: + state === 'hiding' + ? `avatarHoverFadeOut ${HIDE_DURATION}ms both` + : `avatarHoverFadeIn ${SHOW_DURATION}ms both`, + } + const prefetchProfileQuery = usePrefetchProfileQuery() const prefetchedProfile = React.useRef(false) - const targetHovered = React.useRef(false) - const cardHovered = React.useRef(false) - const targetClicked = React.useRef(false) - const showTimeout = React.useRef() + const prefetchIfNeeded = React.useCallback(async () => { + if (!prefetchedProfile.current) { + prefetchProfileQuery(props.did) + } + }, [prefetchProfileQuery, props.did]) - const onPointerEnterTarget = React.useCallback(() => { - showTimeout.current = setTimeout(async () => { - targetHovered.current = true - - if (prefetchedProfile.current) { - // if we're navigating - if (targetClicked.current) return - setHovered(true) - } else { - await prefetchProfileQuery(props.did) - - if (targetHovered.current) { - setHovered(true) - } - prefetchedProfile.current = true - } - }, 350) - }, [props.did, prefetchProfileQuery]) - const onPointerEnterCard = React.useCallback(() => { - cardHovered.current = true - // if we're navigating - if (targetClicked.current) return - setHovered(true) + const isVisible = + state === 'showing' || state === 'might-hide' || state === 'hiding' + + // We need at most one timeout at a time (to transition to the next state). + const nextTimeout = React.useRef(null) + const transitionToState = React.useCallback((nextState: State) => { + if (nextTimeout.current) { + clearTimeout(nextTimeout.current) + nextTimeout.current = null + } + setState(nextState) }, []) + + const onReadyToShow = useNonReactiveCallback(() => { + if (state === 'might-show') { + transitionToState('showing') + } + }) + + const onReadyToHide = useNonReactiveCallback(() => { + if (state === 'might-hide') { + transitionToState('hiding') + nextTimeout.current = setTimeout(onHidingAnimationEnd, HIDE_DURATION) + } + }) + + const onHidingAnimationEnd = useNonReactiveCallback(() => { + if (state === 'hiding') { + transitionToState('hidden') + } + }) + + const onReceiveHover = useNonReactiveCallback(() => { + prefetchIfNeeded() + if (state === 'hidden') { + transitionToState('might-show') + nextTimeout.current = setTimeout(onReadyToShow, SHOW_DELAY) + } else if (state === 'might-show') { + // Do nothing + } else if (state === 'showing') { + // Do nothing + } else if (state === 'might-hide') { + transitionToState('showing') + } else if (state === 'hiding') { + transitionToState('showing') + } + }) + + const onLoseHover = useNonReactiveCallback(() => { + if (state === 'hidden') { + // Do nothing + } else if (state === 'might-show') { + transitionToState('hidden') + } else if (state === 'showing') { + transitionToState('might-hide') + nextTimeout.current = setTimeout(onReadyToHide, HIDE_DELAY) + } else if (state === 'might-hide') { + // Do nothing + } else if (state === 'hiding') { + // Do nothing + } + }) + + const onPointerEnterTarget = React.useCallback(() => { + onReceiveHover() + }, [onReceiveHover]) + const onPointerLeaveTarget = React.useCallback(() => { - clearTimeout(showTimeout.current) - targetHovered.current = false - setTimeout(() => { - if (cardHovered.current) return - setHovered(false) - }, 100) - }, []) + onLoseHover() + }, [onLoseHover]) + + const onPointerEnterCard = React.useCallback(() => { + onReceiveHover() + }, [onReceiveHover]) + const onPointerLeaveCard = React.useCallback(() => { - cardHovered.current = false - setTimeout(() => { - if (targetHovered.current) return - setHovered(false) - }, 100) - }, []) - const onClickTarget = React.useCallback(() => { - targetClicked.current = true - setHovered(false) - }, []) - const hide = React.useCallback(() => { - setHovered(false) - }, []) + onLoseHover() + }, [onLoseHover]) + + const onDismiss = React.useCallback(() => { + transitionToState('hidden') + }, [transitionToState]) return (
{props.children} - - {hovered && ( + {isVisible && ( - +
- +
- +
)}
) } -function Card({did, hide}: {did: string; hide: () => void}) { +let Card = ({did, hide}: {did: string; hide: () => void}): React.ReactNode => { const t = useTheme() const profile = useProfileQuery({did}) @@ -173,6 +220,7 @@ function Card({did, hide}: {did: string; hide: () => void}) { ) } +Card = React.memo(Card) function Inner({ profile, diff --git a/web/index.html b/web/index.html index 06d00dec97..b059e69e90 100644 --- a/web/index.html +++ b/web/index.html @@ -239,6 +239,16 @@ inset:0; animation: rotate 500ms linear infinite; } + + @keyframes avatarHoverFadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + + @keyframes avatarHoverFadeOut { + from { opacity: 1; } + to { opacity: 0; } + }