fix progress bar during precompute stage

Author: jeffhwang-sq

service/src/main/kotlin/app/cash/backfila/ui/components/BackfillsTable.kt

@@ -80,7 +80,7 @@ fun TagConsumer<*>.BackfillsTable(
                   td(
                     "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0",
                   ) {
-                    ProgressBar(it.backfilled_matching_record_count, it.computed_matching_record_count)
+                    ProgressBar(it.backfilled_matching_record_count, it.computed_matching_record_count, it.precomputing_done)
                   }
                   listOf(it.created_by_user, it.created_at, it.last_active_at).map {
                     td(

service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt

@@ -5,16 +5,31 @@ import kotlinx.html.TagConsumer
 import kotlinx.html.div
 import kotlinx.html.style
 
-fun TagConsumer<*>.ProgressBar(numerator: Number, denominator: Number) {
+fun TagConsumer<*>.ProgressBar(
+  numerator: Number,
+  denominator: Number,
+  precomputingDone: Boolean = true,
+) {
   div("w-full bg-gray-200 rounded-full dark:bg-gray-700") {
-    val percentComplete = if (numerator.toInt() == 0) 0 else round((numerator.toDouble() / denominator.toDouble()) * 100)
-    // Don't show blue sliver for 0%, just show the gray empty bar
-    val showPartialBarStyle = if (percentComplete.toInt() != 0) "bg-blue-600" else ""
-    div(
-      "$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full",
-    ) {
-      style = "width: ${if (percentComplete.toInt() == 0) 100 else percentComplete}%"
-      +"""$percentComplete%"""
+    val percentComplete = when {
+      !precomputingDone -> null // Show indeterminate during precomputing
+      denominator.toDouble() <= 0 -> 0.0 // Handle zero denominator
+      else -> round((numerator.toDouble() / denominator.toDouble()) * 100)
+    }
+
+    // Show indeterminate progress bar during precomputing
+    if (percentComplete == null) {
+      div("animate-pulse bg-gray-300 text-xs font-medium text-center p-0.5 leading-none rounded-full") {
+        style = "width: 100%"
+        +"Computing..."
+      }
+    } else {
+      // Don't show blue sliver for 0%, just show the gray empty bar
+      val showPartialBarStyle = if (percentComplete > 0) "bg-blue-600" else ""
+      div("$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full") {
+        style = "width: $percentComplete%"
+        +"${percentComplete.toInt()}%"
+      }
     }
   }
 }

service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt

@@ -5,16 +5,31 @@ import kotlinx.html.TagConsumer
 import kotlinx.html.div
 import kotlinx.html.style
 
-fun TagConsumer<*>.ProgressBarReloader(numerator: Number, denominator: Number) {
+fun TagConsumer<*>.ProgressBarReloader(
+  numerator: Number,
+  denominator: Number,
+  precomputingDone: Boolean = true,
+) {
   div("w-full bg-gray-200 rounded-full dark:bg-gray-700") {
-    val percentComplete = if (numerator.toInt() == 0) 0 else round((numerator.toDouble() / denominator.toDouble()) * 100)
-    // Don't show blue sliver for 0%, just show the gray empty bar
-    val showPartialBarStyle = if (percentComplete.toInt() != 0) "bg-blue-600" else ""
-    div(
-      "$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full",
-    ) {
-      style = "width: ${if (percentComplete.toInt() == 0) 100 else percentComplete}%"
-      +"""$percentComplete%"""
+    val percentComplete = when {
+      !precomputingDone -> null // Show indeterminate during precomputing
+      denominator.toDouble() <= 0 -> 0.0 // Handle zero denominator
+      else -> round((numerator.toDouble() / denominator.toDouble()) * 100)
+    }
+
+    // Show indeterminate progress bar during precomputing
+    if (percentComplete == null) {
+      div("animate-pulse bg-gray-300 text-xs font-medium text-center p-0.5 leading-none rounded-full") {
+        style = "width: 100%"
+        +"Computing..."
+      }
+    } else {
+      // Don't show blue sliver for 0%, just show the gray empty bar
+      val showPartialBarStyle = if (percentComplete > 0) "bg-blue-600" else ""
+      div("$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full") {
+        style = "width: $percentComplete%"
+        +"${percentComplete.toInt()}%"
+      }
     }
   }
 }

service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt

@@ -187,6 +187,7 @@ class BackfillShowAction @Inject constructor(
                       ProgressBar(
                         partition.backfilled_matching_record_count,
                         partition.computed_matching_record_count,
+                        partition.precomputing_done,
                       )
                     }
                     td("hidden py-5 pl-8 pr-0 text-right align-top tabular-nums text-gray-700 sm:table-cell") {