Fix extra renders when hovering over comments
Remove defunct "show comment menu on hover" implementation. It was re-rendering on every mouse movement, plus the css classname no longer exists, and also it wasn't working right in the first place (reverted few Desktop revision back, and all it did was highlighting the menu rather than controlling the visibility). If we want the "show comment menu on hover" behavior again in the future, the CPU usage problem can probably be addressed by debouncing/throttling state-change.
This commit is contained in:
parent
ce7be7229b
commit
a9672a4b5c
2 changed files with 3 additions and 17 deletions
|
@ -118,8 +118,6 @@ function Comment(props: Props) {
|
||||||
const [isEditing, setEditing] = useState(false);
|
const [isEditing, setEditing] = useState(false);
|
||||||
const [editedMessage, setCommentValue] = useState(message);
|
const [editedMessage, setCommentValue] = useState(message);
|
||||||
const [charCount, setCharCount] = useState(editedMessage.length);
|
const [charCount, setCharCount] = useState(editedMessage.length);
|
||||||
// used for controlling the visibility of the menu icon
|
|
||||||
const [mouseIsHovering, setMouseHover] = useState(false);
|
|
||||||
const [showReplies, setShowReplies] = useState(false);
|
const [showReplies, setShowReplies] = useState(false);
|
||||||
const [page, setPage] = useState(0);
|
const [page, setPage] = useState(0);
|
||||||
const [advancedEditor] = usePersistedState('comment-editor-mode', false);
|
const [advancedEditor] = usePersistedState('comment-editor-mode', false);
|
||||||
|
@ -219,8 +217,6 @@ function Comment(props: Props) {
|
||||||
'comment--superchat': supportAmount > 0,
|
'comment--superchat': supportAmount > 0,
|
||||||
})}
|
})}
|
||||||
id={commentId}
|
id={commentId}
|
||||||
onMouseOver={() => setMouseHover(true)}
|
|
||||||
onMouseOut={() => setMouseHover(false)}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={classnames('comment__content', {
|
className={classnames('comment__content', {
|
||||||
|
@ -286,11 +282,7 @@ function Comment(props: Props) {
|
||||||
<div className="comment__menu">
|
<div className="comment__menu">
|
||||||
<Menu>
|
<Menu>
|
||||||
<MenuButton className="menu__button">
|
<MenuButton className="menu__button">
|
||||||
<Icon
|
<Icon size={18} icon={ICONS.MORE_VERTICAL} />
|
||||||
size={18}
|
|
||||||
className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}
|
|
||||||
icon={ICONS.MORE_VERTICAL}
|
|
||||||
/>
|
|
||||||
</MenuButton>
|
</MenuButton>
|
||||||
<CommentMenuList
|
<CommentMenuList
|
||||||
uri={uri}
|
uri={uri}
|
||||||
|
|
|
@ -42,7 +42,7 @@ function LivestreamComment(props: Props) {
|
||||||
isFiat,
|
isFiat,
|
||||||
isPinned,
|
isPinned,
|
||||||
} = props;
|
} = props;
|
||||||
const [mouseIsHovering, setMouseHover] = React.useState(false);
|
|
||||||
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
|
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
|
||||||
const { claimName } = parseURI(authorUri);
|
const { claimName } = parseURI(authorUri);
|
||||||
|
|
||||||
|
@ -51,8 +51,6 @@ function LivestreamComment(props: Props) {
|
||||||
className={classnames('livestream-comment', {
|
className={classnames('livestream-comment', {
|
||||||
'livestream-comment--superchat': supportAmount > 0,
|
'livestream-comment--superchat': supportAmount > 0,
|
||||||
})}
|
})}
|
||||||
onMouseOver={() => setMouseHover(true)}
|
|
||||||
onMouseOut={() => setMouseHover(false)}
|
|
||||||
>
|
>
|
||||||
{supportAmount > 0 && (
|
{supportAmount > 0 && (
|
||||||
<div className="super-chat livestream-superchat__banner">
|
<div className="super-chat livestream-superchat__banner">
|
||||||
|
@ -106,11 +104,7 @@ function LivestreamComment(props: Props) {
|
||||||
<div className="livestream-comment__menu">
|
<div className="livestream-comment__menu">
|
||||||
<Menu>
|
<Menu>
|
||||||
<MenuButton className="menu__button">
|
<MenuButton className="menu__button">
|
||||||
<Icon
|
<Icon size={18} icon={ICONS.MORE_VERTICAL} />
|
||||||
size={18}
|
|
||||||
className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}
|
|
||||||
icon={ICONS.MORE_VERTICAL}
|
|
||||||
/>
|
|
||||||
</MenuButton>
|
</MenuButton>
|
||||||
<CommentMenuList
|
<CommentMenuList
|
||||||
uri={uri}
|
uri={uri}
|
||||||
|
|
Loading…
Reference in a new issue