From b8caa1d4b826f030edb370be7d44a0e5785efa6a Mon Sep 17 00:00:00 2001
From: liatvi <liatvi@wix.com>
Date: Wed, 28 Feb 2024 16:07:15 +0200
Subject: [PATCH] setTimeout 0 onArrowClick - INP improvement (#1192)

* setTimeout 0 onArrowClick - INP improvement

* fix text

* remove timers

* test

* remove

* try

* fix
---
 .../components/gallery/proGallery/navigationArrows.js    | 4 ++--
 .../tests/components/gallery/slideshowView.spec.js       | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js
index 930da654f..9356fb6ab 100644
--- 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
index 4fb84e570..99f398c6b 100644
--- 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);