Fix-step-number

elastic · Feb 18, 2021 · db342e5 · db342e5
1 parent 5f951bd
commit db342e5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
@@ -73,7 +73,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
     }
   }, [data]);
 
-  const imgSrc = stepImages[stepNumber] || data?.src;
+  const imgSrc = stepImages?.[stepNumber - 1] ?? data?.src;
 
   const captionContent = formatCaptionContent(stepNumber, data?.maxSteps);
 
@@ -85,6 +85,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
       setStepNumber={setStepNumber}
       stepNumber={stepNumber}
       timestamp={timestamp}
+      isLoading={status === FETCH_STATUS.LOADING || status === FETCH_STATUS.PENDING}
     />
   );
 

diff --git a/.../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx b/.../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
@@ -19,6 +19,7 @@ export interface StepImageCaptionProps {
   setStepNumber: React.Dispatch<React.SetStateAction<number>>;
   stepNumber: number;
   timestamp: string;
+  isLoading?: boolean;
 }
 
 const ImageCaption = euiStyled.div`
@@ -35,6 +36,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
   setStepNumber,
   stepNumber,
   timestamp,
+  isLoading,
 }) => {
   return (
     <ImageCaption>
@@ -45,10 +47,11 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonEmpty
                 disabled={stepNumber === 1}
                 onClick={() => {
-                  setStepNumber(stepNumber - 1);
+                  setStepNumber((prevState) => prevState - 1);
                 }}
                 iconType="arrowLeft"
                 aria-label={prevAriaLabel}
+                isLoading={isLoading}
               >
                 {prevAriaLabel}
               </EuiButtonEmpty>
@@ -60,11 +63,12 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonEmpty
                 disabled={stepNumber === maxSteps}
                 onClick={() => {
-                  setStepNumber(stepNumber + 1);
+                  setStepNumber((prevState) => prevState + 1);
                 }}
                 iconType="arrowRight"
                 iconSide="right"
                 aria-label={nextAriaLabel}
+                isLoading={isLoading}
               >
                 {nextAriaLabel}
               </EuiButtonEmpty>