fix: resolve news image zoom flickering on hover (#526)

Author: bluestreak01

src/scenes/News/image-zoom.tsx

@@ -26,10 +26,12 @@ const Overlay = styled.div<{ visible: boolean }>`
   opacity: ${({ visible }) => (visible ? 1 : 0)};
   pointer-events: ${({ visible }) => (visible ? "auto" : "none")};
   transition: opacity 0.2s ease-in-out;
+  cursor: pointer;
 `
 
 const Wrapper = styled.div`
   z-index: 1001;
+  cursor: pointer;
 
   img {
     border: 1px solid ${({ theme }) => theme.color.offWhite};
@@ -72,9 +74,12 @@ export const ImageZoom = () => {
 
   return (
     <Root ref={rootRef} visible={imageToZoom !== undefined}>
-      <Overlay visible={imageToZoom !== undefined} />
+      <Overlay
+        visible={imageToZoom !== undefined}
+        onClick={() => dispatch(actions.console.setImageToZoom(undefined))}
+      />
       {imageToZoom && (
-        <Wrapper>
+        <Wrapper onClick={() => dispatch(actions.console.setImageToZoom(undefined))}>
           <Thumbnail
             {...imageToZoom}
             containerWidth={rootWidth ? rootWidth * 0.9 : 460}

src/scenes/News/index.tsx

@@ -6,7 +6,7 @@ import {
   PrimaryToggleButton,
 } from "../../components"
 import styled from "styled-components"
-import React, { useEffect, useState, useContext } from "react"
+import React, { useEffect, useState, useContext, useRef } from "react"
 import { QuestContext } from "../../providers"
 import { NewsItem } from "../../utils"
 import { useDispatch, useSelector } from "react-redux"
@@ -93,8 +93,11 @@ const News = () => {
   // This boolean is to animate the bell icon and display a bullet indicator
   const [hasUnreadNews, setHasUnreadNews] = useState(false)
   const activeSidebar = useSelector(selectors.console.getActiveSidebar)
+  const imageToZoom = useSelector(selectors.console.getImageToZoom)
 
-  let hoverTimeout: ReturnType<typeof setTimeout>
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const imageToZoomRef = useRef(imageToZoom)
+  imageToZoomRef.current = imageToZoom
 
   const getEnterpriseNews = async () => {
     setIsLoading(true)
@@ -248,7 +251,7 @@ const News = () => {
                         ? {
                             onMouseOver: () => {
                               if (newsItem.thumbnail) {
-                                hoverTimeout = setTimeout(() => {
+                                hoverTimeoutRef.current = setTimeout(() => {
                                   if (newsItem && newsItem.thumbnail) {
                                     dispatch(
                                       actions.console.setImageToZoom({
@@ -268,12 +271,15 @@ const News = () => {
                               }
                             },
                             onMouseOut: () => {
-                              clearTimeout(hoverTimeout)
-                              setTimeout(() => {
-                                dispatch(
-                                  actions.console.setImageToZoom(undefined),
-                                )
-                              }, 250)
+                              clearTimeout(hoverTimeoutRef.current)
+                              // Only dismiss if zoom isn't visible (overlay intercepts mouse when visible)
+                              if (!imageToZoomRef.current) {
+                                setTimeout(() => {
+                                  dispatch(
+                                    actions.console.setImageToZoom(undefined),
+                                  )
+                                }, 250)
+                              }
                             },
                           }
                         : {})}