Leading zeros need to be grey

The production one has the leading zeros stay grey.

Issue #48277

parcel/js/counter.jsx

@@ -13,8 +13,20 @@ function convertNumberToArrayOfString(number) {
 function createCharacterStates(amount, state) {
   let characterArray = convertNumberToArrayOfString(amount);
   let characterStates = [];
+  let foundNonZero = false;
   for (const character of characterArray) {
-    characterStates.push({character: character, state: state});
+    let leadingZero = true;
+    if (!foundNonZero && character != '0') {
+      foundNonZero = true;
+    }
+    if (foundNonZero) {
+      leadingZero = false;
+    }
+    characterStates.push({
+      character: character,
+      state: state,
+      leadingZero: leadingZero,
+    });
   }
   return characterStates;
 }
@@ -52,6 +64,7 @@ export function Counter(props) {
       <CounterCharacter
         key={index}
         character={character.character}
+        leadingZero={character.leadingZero}
         state={character.state}
       />
     );

parcel/js/counter_character.jsx

@@ -2,11 +2,11 @@ import React, {useEffect, useState} from 'react';
 import {useInterval} from './use_interval';
 
 export function CounterCharacter(props) {
-  const {character, state} = props;
+  const {character, leadingZero, state} = props;
   const [flash, setFlash] = useState(false);
 
   const renderCover = () => {
-    if (state == 'resolved') {
+    if (state == 'resolved' && !leadingZero) {
       return null;
     } else {
       return (
@@ -28,13 +28,17 @@ export function CounterCharacter(props) {
     }
   }, delay);
 
-  let characterClasses = ['character', state];
-  if (flash) {
-    characterClasses.push('covered');
-  }
+  let characterClasses = ['character'];
   let displayCharacter = '0';
   if (state == 'resolved') {
     displayCharacter = character;
+    if (!leadingZero) {
+      characterClasses.push('resolved');
+    }
+  } else {
+    if (flash) {
+      characterClasses.push('covered');
+    }
   }
 
   return (