Hovercard: appear and disappear properly

app/soapbox/actions/profile_hover_card.js

@@ -1,5 +1,6 @@
 export const PROFILE_HOVER_CARD_OPEN = 'PROFILE_HOVER_CARD_OPEN';
-export const PROFILE_HOVER_CARD_CLEAR = 'PROFILE_HOVER_CARD_CLEAR';
+export const PROFILE_HOVER_CARD_UPDATE = 'PROFILE_HOVER_CARD_UPDATE';
+export const PROFILE_HOVER_CARD_CLOSE = 'PROFILE_HOVER_CARD_CLOSE';
 
 export function openProfileHoverCard(ref, accountId) {
   return {
@@ -9,8 +10,15 @@ export function openProfileHoverCard(ref, accountId) {
   };
 }
 
-export function clearProfileHoverCard() {
+export function updateProfileHoverCard() {
   return {
-    type: PROFILE_HOVER_CARD_CLEAR,
+    type: PROFILE_HOVER_CARD_UPDATE,
+  };
+}
+
+export function closeProfileHoverCard(force = false) {
+  return {
+    type: PROFILE_HOVER_CARD_CLOSE,
+    force,
   };
 }

app/soapbox/components/profile_hover_card.js

@@ -11,7 +11,10 @@ import Badge from 'soapbox/components/badge';
 import classNames from 'classnames';
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { usePopper } from 'react-popper';
-import { clearProfileHoverCard } from 'soapbox/actions/profile_hover_card';
+import {
+  closeProfileHoverCard,
+  updateProfileHoverCard,
+} from 'soapbox/actions/profile_hover_card';
 
 const getAccount = makeGetAccount();
 
@@ -23,9 +26,15 @@ const getBadges = (account) => {
   return badges;
 };
 
+const handleMouseEnter = (dispatch) => {
+  return e => {
+    dispatch(updateProfileHoverCard());
+  };
+};
+
 const handleMouseLeave = (dispatch) => {
   return e => {
-    dispatch(clearProfileHoverCard());
+    dispatch(closeProfileHoverCard(true));
   };
 };
 
@@ -57,7 +66,7 @@ export const ProfileHoverCard = ({ visible }) => {
   const followedBy  = account.getIn(['relationship', 'followed_by']);
 
   return (
-    <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })} ref={setPopperElement} style={styles.popper} {...attributes.popper} onMouseLeave={handleMouseLeave(dispatch)}>
+    <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })} ref={setPopperElement} style={styles.popper} {...attributes.popper} onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)}>
       <div className='profile-hover-card__container'>
         {followedBy &&
           <span className='relationship-tag'>

app/soapbox/containers/status_container.js

@@ -37,7 +37,7 @@ import {
 import { getSettings } from '../actions/settings';
 import {
   openProfileHoverCard,
-  clearProfileHoverCard,
+  closeProfileHoverCard,
 } from 'soapbox/actions/profile_hover_card';
 
 const messages = defineMessages({
@@ -215,7 +215,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onClearProfileHoverCard() {
-    dispatch(clearProfileHoverCard());
+    setTimeout(() => dispatch(closeProfileHoverCard()), 300);
   },
 
 });

app/soapbox/reducers/profile_hover_card.js

@@ -1,6 +1,7 @@
 import {
   PROFILE_HOVER_CARD_OPEN,
-  PROFILE_HOVER_CARD_CLEAR,
+  PROFILE_HOVER_CARD_CLOSE,
+  PROFILE_HOVER_CARD_UPDATE,
 } from 'soapbox/actions/profile_hover_card';
 import { Map as ImmutableMap } from 'immutable';
 
@@ -13,8 +14,13 @@ export default function profileHoverCard(state = initialState, action) {
       ref: action.ref,
       accountId: action.accountId,
     });
-  case PROFILE_HOVER_CARD_CLEAR:
-    return ImmutableMap();
+  case PROFILE_HOVER_CARD_UPDATE:
+    return state.set('hovered', true);
+  case PROFILE_HOVER_CARD_CLOSE:
+    if (state.get('hovered') === true && !action.force)
+      return state;
+    else
+      return ImmutableMap();
   default:
     return state;
   }