PrestakingWelcome: implement designer feedback

src/components/StepProgressBar.vue

@@ -14,63 +14,87 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, watch, onMounted } from '@vue/composition-api';
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted } from '@vue/composition-api';
 
 export default defineComponent({
     props: {
         currentStep: {
             type: Number,
             required: true,
         },
+        shouldAnimate: {
+            type: Boolean,
+            default: true,
+        },
+        isPaused: {
+            type: Boolean,
+            default: false,
+        },
     },
-    setup(props) {
+    setup(props, { emit }) {
         const animationProgress = ref(0);
         const isFirstStepAnimated = ref(false);
-        const ANIMATION_DURATION = 1500; // 1500ms = 1.5s
+        const ANIMATION_DURATION = 5000; // 5000ms = 5s (adjust as needed)
 
         const getFillWidth = computed(() => (step: number) => {
             if (props.currentStep > step) return '100%';
             if (props.currentStep === step) {
-                // Apply easing function to the animation progress
-                const easedProgress = easeOutCubic(animationProgress.value / 100) * 100;
-                return `${easedProgress}%`;
+                return props.shouldAnimate ? `${animationProgress.value}%` : '100%';
             }
             return '0%';
         });
 
-        // Easing function: easeOutCubic
-        const easeOutCubic = (t: number): number => 1 - (1 - t) ** 3;
-
         let animationFrame: number;
+        let startTime: number;
+        let pausedTime = 0;
+        let lastPauseTime: number | null = null;
+
+        const animate = (timestamp: number) => {
+            if (!startTime) startTime = timestamp;
 
-        const animateStep = (timestamp: number) => {
-            if (!animationStartTime) {
-                animationStartTime = timestamp;
+            if (props.isPaused) {
+                if (lastPauseTime === null) {
+                    lastPauseTime = timestamp;
+                }
+                animationFrame = requestAnimationFrame(animate);
+                return;
             }
-            const elapsed = timestamp - animationStartTime;
-            const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
+
+            if (lastPauseTime !== null) {
+                pausedTime += timestamp - lastPauseTime;
+                lastPauseTime = null;
+            }
+
+            const elapsedTime = timestamp - startTime - pausedTime;
+            const progress = Math.min(elapsedTime / ANIMATION_DURATION, 1);
             animationProgress.value = progress * 100;
 
-            if (progress < 1) {
-                animationFrame = requestAnimationFrame(animateStep);
+            if (progress < 1 && props.shouldAnimate) {
+                animationFrame = requestAnimationFrame(animate);
             } else {
                 isFirstStepAnimated.value = true;
+                emit('stepCompleted');
             }
         };
 
-        let animationStartTime: number | null = null;
-
         const startAnimation = () => {
-            animationStartTime = null;
             cancelAnimationFrame(animationFrame);
-            animationFrame = requestAnimationFrame(animateStep);
+            startTime = 0;
+            pausedTime = 0;
+            lastPauseTime = null;
+            animationProgress.value = 0;
+            if (props.shouldAnimate) {
+                animationFrame = requestAnimationFrame(animate);
+            } else {
+                animationProgress.value = 100;
+            }
         };
 
         watch(() => props.currentStep, (newStep, oldStep) => {
             if (newStep > oldStep || (newStep === 1 && !isFirstStepAnimated.value)) {
                 startAnimation();
             } else if (newStep < oldStep) {
-                animationProgress.value = 0;
+                animationProgress.value = 100;
             }
         });
 
@@ -80,6 +104,10 @@ export default defineComponent({
             }
         });
 
+        onUnmounted(() => {
+            cancelAnimationFrame(animationFrame);
+        });
+
         return {
             getFillWidth,
         };