From f9bac7231aac3f91cab2c54f64735785044b68f0 Mon Sep 17 00:00:00 2001
From: Jamey H <jamey.huffnagle@opentrons.com>
Date: Thu, 9 Nov 2023 15:42:16 -0500
Subject: [PATCH] fix(app): fix step meter tearing by using no animation
 (#13960)

ODD optimizations do not prevent step meter tearing on the physical ODD when step progress
regresses. Playing no animation solves the problem until we optimize ODD animations.
---
 .../StepMeter/__tests__/StepMeter.test.tsx      | 17 +++++++++++++++++
 app/src/atoms/StepMeter/index.tsx               | 12 ++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx b/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
index 50aa54e4343..faa688df6f1 100644
--- a/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
+++ b/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
@@ -51,4 +51,21 @@ describe('StepMeter', () => {
     const bar = getByTestId('StepMeter_StepMeterBar')
     expect(bar).toHaveStyle('width: 100%')
   })
+
+  it('should transition with style when progressing forward and no style if progressing backward', () => {
+    props = {
+      ...props,
+      currentStep: 2,
+    }
+    const { getByTestId } = render(props)
+    getByTestId('StepMeter_StepMeterContainer')
+    const bar = getByTestId('StepMeter_StepMeterBar')
+    expect(bar).toHaveStyle('transition: width 0.5s ease-in-out;')
+
+    props = {
+      ...props,
+      currentStep: 1,
+    }
+    expect(bar).not.toHaveStyle('transition: ;')
+  })
 })
diff --git a/app/src/atoms/StepMeter/index.tsx b/app/src/atoms/StepMeter/index.tsx
index ddaf52565cf..0d9774bd363 100644
--- a/app/src/atoms/StepMeter/index.tsx
+++ b/app/src/atoms/StepMeter/index.tsx
@@ -16,13 +16,13 @@ interface StepMeterProps {
 
 export const StepMeter = (props: StepMeterProps): JSX.Element => {
   const { totalSteps, currentStep } = props
+  const prevPercentComplete = React.useRef(0)
   const progress = currentStep != null ? currentStep : 0
-  const percentComplete = `${
+  const percentComplete =
     //    this logic puts a cap at 100% percentComplete which we should never run into
     currentStep != null && currentStep > totalSteps
       ? 100
       : (progress / totalSteps) * 100
-  }%`
 
   const StepMeterContainer = css`
     position: ${POSITION_RELATIVE};
@@ -45,11 +45,15 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
     top: 0;
     height: 100%;
     background-color: ${COLORS.blueEnabled};
-    width: ${percentComplete};
+    width: ${percentComplete}%;
     transform: translateX(0);
-    transition: width 0.5s ease-in-out;
+    transition: ${prevPercentComplete.current <= percentComplete
+      ? 'width 0.5s ease-in-out'
+      : ''};
   `
 
+  prevPercentComplete.current = percentComplete
+
   return (
     <Box data-testid="StepMeter_StepMeterContainer" css={StepMeterContainer}>
       <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />