diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css --- a/web/chat/mention-suggestion-tooltip.css +++ b/web/chat/mention-suggestion-tooltip.css @@ -56,3 +56,12 @@ .suggestion:hover { background-color: var(--typeahead-overlay-light); } + +.notVisible { + opacity: 0; +} + +.visible { + opacity: 1; + transition: opacity 100ms ease-in; +} diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js --- a/web/chat/mention-suggestion-tooltip.react.js +++ b/web/chat/mention-suggestion-tooltip.react.js @@ -1,5 +1,6 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import SearchIndex from 'lib/shared/search-index'; @@ -35,6 +36,13 @@ viewerID, matches, } = props; + const [isVisible, setIsVisible] = React.useState(false); + + React.useEffect(() => { + setIsVisible(true); + + return () => setIsVisible(false); + }, [setIsVisible]); const wholeMatch = matches[0]; //text before @ + @ + username prefix const matchedTextBeforeAtSymbol = matches[1]; // text before @ @@ -100,8 +108,13 @@ return null; } + const overlayClasses = classNames(css.suggestionsContainer, { + [css.notVisible]: !isVisible, + [css.visible]: isVisible, + }); + return ( -
+
{tooltipButtons}
);