Added delay on hover (vtex-apps#6)

AuchanRomania · Jul 7, 2022 · 678e5f6 · 678e5f6
1 parent b97530c
commit 678e5f6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/react/MegaMenu/components/HorizontalMenu.tsx b/react/MegaMenu/components/HorizontalMenu.tsx
@@ -7,7 +7,9 @@ import { injectIntl } from 'react-intl'
 import Skeleton from 'react-loading-skeleton'
 import { useCssHandles } from 'vtex.css-handles'
 import { formatIOMessage } from 'vtex.native-types'
+import _debounce from 'lodash/debounce'
 
+import type { MenuItem } from '../../shared'
 import { megaMenuState } from '../State'
 import styles from '../styles.css'
 import Item from './Item'
@@ -37,6 +39,17 @@ const HorizontalMenu: FC<InjectedIntlProps> = observer(({ intl }) => {
   const departmentActiveHasCategories = !!departmentActive?.menu?.length
   const navRef = useRef<HTMLDivElement>(null)
 
+  const debouncedHandleMouseEnter = useCallback(
+    _debounce((department: MenuItem | null) => {
+      setDepartmentActive(department)
+    }, 400),
+    []
+  )
+
+  const handleOnMouseLeave = () => {
+    debouncedHandleMouseEnter.cancel()
+  }
+
   const handleClickOutside = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (event: any) => {
@@ -95,8 +108,9 @@ const HorizontalMenu: FC<InjectedIntlProps> = observer(({ intl }) => {
               )}
               key={d.id}
               onMouseEnter={() => {
-                setDepartmentActive(d)
+                debouncedHandleMouseEnter(d)
               }}
+              onMouseLeave={handleOnMouseLeave}
             >
               <Item
                 id={d.id}

diff --git a/react/package.json b/react/package.json
@@ -12,12 +12,14 @@
     "mobx-react-lite": "^3.2.0",
     "react-apollo": "^3.1.5",
     "react-csv-reader": "^3.4.0",
+    "lodash": "^4.17.20",
     "react-intl": "^5.20.6",
     "react-loading-skeleton": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^11.12.1",
     "@types/react": "^16.8.10",
+    "@types/lodash": "^4.14.157",
     "@types/react-intl": "^2.3.17",
     "@vtex/test-tools": "^3.3.2",
     "@vtex/tsconfig": "^0.5.6",

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -1554,6 +1554,11 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
+"@types/lodash@^4.14.157":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/node@*", "@types/node@>=6":
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-15.6.1.tgz#32d43390d5c62c5b6ec486a9bc9c59544de39a08"
@@ -3853,7 +3858,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.15, lodash@^4.17.19:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==