diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index b7b9a4fb1..42f44d7cc 100644 --- a/app/soapbox/components/status.js +++ b/app/soapbox/components/status.js @@ -20,6 +20,7 @@ import PollContainer from 'soapbox/containers/poll_container'; import { NavLink } from 'react-router-dom'; import ProfileHoverCardContainer from '../features/profile_hover_card/profile_hover_card_container'; import { isMobile } from '../../../app/soapbox/is_mobile'; +import { debounce } from 'lodash'; // We use the component (and not the container) since we do not want // to use the progress bar to show download progress @@ -252,11 +253,16 @@ class Status extends ImmutablePureComponent { this.handleToggleMediaVisibility(); } + showProfileCard = debounce(() => { + this.setState({ profileCardVisible: true }); + }, 1200); + handleProfileHover = e => { - if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true }); + if (!isMobile(window.innerWidth)) this.showProfileCard(); } handleProfileLeave = e => { + this.showProfileCard.cancel(); if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false }); } diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss index d87a3159c..5d7f7e8ff 100644 --- a/app/styles/components/profile_hover_card.scss +++ b/app/styles/components/profile_hover_card.scss @@ -13,7 +13,6 @@ opacity: 0; transition-property: opacity; transition-duration: 0.2s; - transition-delay: 0.7s; width: 320px; z-index: 998; left: -10px;