diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx index 71c22b4406867..cfb92dd31190e 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx +++ b/x-pack/plugins/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/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx index 80ed3ca46b8aa..a33e587093279 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx @@ -21,6 +21,7 @@ describe('StepImageCaption', () => { setStepNumber: jest.fn(), stepNumber: 2, timestamp: '2020-11-26T15:28:56.896Z', + isLoading: false, }; }); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx index 018ef85062ecc..fe9709a02b684 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx @@ -19,6 +19,7 @@ export interface StepImageCaptionProps { setStepNumber: React.Dispatch>; stepNumber: number; timestamp: string; + isLoading: boolean; } const ImageCaption = euiStyled.div` @@ -35,6 +36,7 @@ export const StepImageCaption: React.FC = ({ setStepNumber, stepNumber, timestamp, + isLoading, }) => { return ( @@ -49,6 +51,7 @@ export const StepImageCaption: React.FC = ({ }} iconType="arrowLeft" aria-label={prevAriaLabel} + isLoading={isLoading} > {prevAriaLabel} @@ -65,6 +68,7 @@ export const StepImageCaption: React.FC = ({ iconType="arrowRight" iconSide="right" aria-label={nextAriaLabel} + isLoading={isLoading} > {nextAriaLabel}