setTimeout 0 onArrowClick - INP improvement (#1192)

* setTimeout 0 onArrowClick - INP improvement * fix text * remove timers * test * remove * try * fix
wix-incubator · Feb 28, 2024 · b8caa1d · b8caa1d
1 parent f997af9
commit b8caa1d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js
@@ -175,10 +175,10 @@ export function ArrowButton({
   navigationArrowPortalId,
 }) {
   const isNext = (directionIsLeft && isRTL) || (!directionIsLeft && !isRTL);
-
+  const nextAction = () => next({ direction: directionIsLeft ? -1 : 1 });
   const buttonProps = {
     className: arrowsBaseClasses.join(' '),
-    onClick: () => next({ direction: directionIsLeft ? -1 : 1 }),
+    onClick: () => setTimeout(nextAction, 0),
     ['aria-label']: `${isNext ? 'Next' : 'Previous'} Item`,
     tabIndex: tabIndex(isNext ? 'slideshowNext' : 'slideshowPrev'),
     key: !isNext ? 'nav-arrow-back' : 'nav-arrow-next',

diff --git a/packages/gallery/tests/components/gallery/slideshowView.spec.js b/packages/gallery/tests/components/gallery/slideshowView.spec.js
@@ -163,7 +163,8 @@ describe('Slideshow View', () => {
       }, 450);
     });
 
-    it('Handle nav arrows click correctly (next/prev image)', () => {
+    it('Handle nav arrows click correctly (next/prev image)', async () => {
+      jest.useFakeTimers();
       Object.assign(initialGalleryViewProps.scroll, {
         top: 1,
         left: 1,
@@ -178,9 +179,13 @@ describe('Slideshow View', () => {
       driver.mount(SlideshowView, galleryViewProps);
       expect(driver.get.state('activeIndex')).to.equal(0);
       driver.find.hook('nav-arrow-next').simulate('click');
-      setTimeout(() => {
+      jest.advanceTimersByTime(1000);
+      await Promise.resolve();
+      setTimeout(async () => {
         expect(driver.get.state('activeIndex')).to.equal(1); //navigates
         driver.find.hook('nav-arrow-next').simulate('click');
+        jest.advanceTimersByTime(1000);
+        await Promise.resolve();
         setTimeout(() => {
           expect(driver.get.state('activeIndex')).to.equal(2);
         }, 450);