[web-console] Make transaction progress jump when transaction ID changes

Karakatiza666 · Karakatiza666 · commit f0bc668d5a7d · 2026-05-15T17:49:27.000Z
Display transaction ID

Signed-off-by: Karakatiza666 &lt;bulakh.96@gmail.com&gt;
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/performance/TransactionStatus.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/performance/TransactionStatus.svelte
@@ -10,6 +10,7 @@
   const global = $derived(metrics.current.global)
   const transactionStatus = $derived(global.transaction_status)
   const commitProgress = $derived(global.commit_progress)
+  const transactionId = $derived(global.transaction_id)
 
   const total = $derived(
     commitProgress
@@ -32,18 +33,35 @@
       ? ((commitProgress.completed + commitProgress.in_progress * inProgressFraction) / total) * 100
       : null
   )
+
+  // Disable the smooth progress bar transition when the transaction changes so
+  // the bar jumps immediately to the new value rather than animating.
+  let disableTransition = $state(false)
+  let prevTransactionId = transactionId
+
+  $effect(() => {
+    const currentId = transactionId
+    if (currentId !== prevTransactionId) {
+      prevTransactionId = currentId
+      disableTransition = true
+      requestAnimationFrame(() => {
+        disableTransition = false
+      })
+    }
+  })
 </script>
 
 {#if transactionStatus !== 'NoTransaction'}
-  <div class="flex flex-wrap items-center gap-x-8 gap-y-2 {_class}" transition:slide>
+  <div class="flex flex-wrap items-center gap-x-16 gap-y-2 {_class}" transition:slide>
     <div class="flex w-28 flex-col items-center">
       <div class="text-sm text-nowrap">Transaction status</div>
-      <div class="pt-2">
+      <div class="pt-2 flex flex-nowrap items-center gap-2">
         {#if transactionStatus === 'TransactionInProgress'}
           <div class="pointer-events-none chip bg-tertiary-50-950 uppercase">Started</div>
         {:else if transactionStatus === 'CommitInProgress'}
           <div class="pointer-events-none chip bg-warning-200-800 uppercase">Committing</div>
         {/if}
+        <div class="font-dm-mono text-sm w-0">#{transactionId}</div>
       </div>
     </div>
 
@@ -66,13 +84,17 @@
         <div class="relative">
           <Progress class="h-2" value={combinedPercent} max={100}>
             <Progress.Track class="bg-surface-600-400">
-              <Progress.Range class="bg-yellow-500 duration-2000 ease-linear" />
+              <Progress.Range
+                class="bg-yellow-500 {disableTransition ? 'duration-0' : 'duration-2000 ease-linear'}"
+              />
             </Progress.Track>
           </Progress>
           <Progress class="absolute inset-x-0 bottom-0 h-2" value={completedPercent} max={100}>
             <Progress.Track class="opacity-0"></Progress.Track>
             <Progress.Range
-              class="absolute inset-y-0 left-0 bg-success-500 duration-2000 ease-linear"
+              class="absolute inset-y-0 left-0 bg-success-500 {disableTransition
+                ? 'duration-0'
+                : 'duration-2000 ease-linear'}"
             />
           </Progress>
         </div>
