From fcb6e9f2e6e3ad4583acd13e10941c3852f5260e Mon Sep 17 00:00:00 2001
From: Abdul Wahab Zahid <awahab07@yahoo.com>
Date: Thu, 22 Sep 2022 17:09:54 +0200
Subject: [PATCH] Fix Next and Previous button on step screenshot carousel.
 (#141422)

(cherry picked from commit 585d51444e7301b392ec9228d62811a33cb0690b)
---
 .../ping_list/columns/ping_timestamp/ping_timestamp.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
index 1eef87ed9efcd..4cee2eb9bfca8 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
@@ -63,8 +63,11 @@ export const PingTimestamp = ({
 
   const [screenshotRef, setScreenshotRef] = useState<ScreenshotRefImageData | undefined>(undefined);
 
+  const isScreenshotRefValid = Boolean(
+    screenshotRef && screenshotRef?.ref?.screenshotRef?.synthetics?.step?.index === stepNumber
+  );
   const { data, loading } = useInProgressImage({
-    hasImage: Boolean(stepImages[stepNumber - 1]) || Boolean(screenshotRef),
+    hasImage: Boolean(stepImages[stepNumber - 1]) || isScreenshotRefValid,
     hasIntersected: Boolean(intersection && intersection.intersectionRatio === 1),
     stepStatus,
     imgPath,