feat(ui): refines progress bar animation curve (#11167)

Refines the animation curve used in the new progress bar for route
transitions. Uses an exponential acceleration and decay so that the
indicator progresses quickly at the onset, then gradually decelerates at
it approaches completion. Also caps the progress at ~90%.

Introduced in #9275.

Author: jacobsfletch

packages/ui/src/providers/RouteTransition/index.tsx

@@ -26,12 +26,21 @@ export const RouteTransitionProvider: React.FC<RouteTransitionProps> = ({ childr
   const timerID = useRef(null)
 
   const initiateProgress = useCallback(() => {
-    // randomly update progress at random times, never reaching 100%
     timerID.current = setInterval(() => {
-      const projectedProgress =
-        transitionProgressRef.current + Math.random() * 0.1 * (1 - transitionProgressRef.current)
-
-      const newProgress = projectedProgress >= 1 ? 1 : projectedProgress
+      // randomly update progress using an exponential curve
+      // cap the progress to ensure it never fully reaches completion
+      // accelerate quickly then decelerate slowly
+      const maxProgress = 0.93
+      const jumpFactor = 0.2 // lower to reduce jumps in progress
+      const growthFactor = 0.75 // adjust to control acceleration
+      const slowdownFactor = 0.75 // adjust to control deceleration
+
+      const newProgress =
+        transitionProgressRef.current +
+        (maxProgress - transitionProgressRef.current) *
+          Math.random() *
+          jumpFactor *
+          Math.pow(Math.log(1 + (1 - transitionProgressRef.current) * growthFactor), slowdownFactor)
 
       setTransitionProgress(newProgress)
       transitionProgressRef.current = newProgress