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.

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: ;')
+  })
 })

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} />