fix: performance drop caused by UI animation (#857)

* Remove InfiniteProgressCircle

* Use GitHub vars for --num-flaky-test-attempts flag

* Format Dart code

* Add DottedProgressCircle

* Add setting for progress animation style

* Revert "Add setting for progress animation style"

This reverts commit c14cc63.

* Revert "Add DottedProgressCircle"

This reverts commit ef1c427.

* Use ProgressCircle with no animation

* Format Dart code

.github/workflows/android-build-test.yml

@@ -204,7 +204,7 @@ jobs:
             --app $GCLOUD_BUCKET_PATH/test-main-tflite.apk \
             --test $GCLOUD_BUCKET_PATH/test-helper-tflite.apk \
             --timeout 30m \
-            --num-flaky-test-attempts 2 \
+            --num-flaky-test-attempts ${{ vars.NUM_FLAKY_TEST_ATTEMPTS }} \
             --device model=redfin,version=30,locale=en,orientation=portrait \
             --client-details=buildNumber=${{ github.run_number }}
 
@@ -229,7 +229,7 @@ jobs:
             --app $GCLOUD_BUCKET_PATH/test-main-pixel.apk \
             --test $GCLOUD_BUCKET_PATH/test-helper-pixel.apk \
             --timeout 30m \
-            --num-flaky-test-attempts 2 \
+            --num-flaky-test-attempts ${{ vars.NUM_FLAKY_TEST_ATTEMPTS }} \
             --device model=oriole,version=32,locale=en,orientation=portrait \
             --client-details=buildNumber=${{ github.run_number }}
 
@@ -254,7 +254,7 @@ jobs:
             --app $GCLOUD_BUCKET_PATH/test-main-qti.apk \
             --test $GCLOUD_BUCKET_PATH/test-helper-qti.apk \
             --timeout 30m \
-            --num-flaky-test-attempts 2 \
+            --num-flaky-test-attempts ${{ vars.NUM_FLAKY_TEST_ATTEMPTS }} \
             --device model=b0q,version=33,locale=en,orientation=portrait \
             --client-details=buildNumber=${{ github.run_number }}
 
@@ -279,6 +279,6 @@ jobs:
             --app $GCLOUD_BUCKET_PATH/test-main-mtk.apk \
             --test $GCLOUD_BUCKET_PATH/test-helper-mtk.apk \
             --timeout 30m \
-            --num-flaky-test-attempts 2 \
+            --num-flaky-test-attempts ${{ vars.NUM_FLAKY_TEST_ATTEMPTS }} \
             --device model=OP515BL1,version=33,locale=en,orientation=portrait \
             --client-details=buildNumber=${{ github.run_number }}

flutter/lib/ui/home/benchmark_running_screen.dart

@@ -13,7 +13,7 @@ import 'package:mlperfbench/localizations/app_localizations.dart';
 import 'package:mlperfbench/state/task_runner.dart';
 import 'package:mlperfbench/ui/app_styles.dart';
 import 'package:mlperfbench/ui/formatter.dart';
-import 'package:mlperfbench/ui/home/progress_circles.dart';
+import 'package:mlperfbench/ui/home/progress_circle.dart';
 import 'package:mlperfbench/ui/icons.dart';
 
 class BenchmarkRunningScreen extends StatefulWidget {
@@ -114,9 +114,9 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
             ),
           ),
         ),
-        InfiniteProgressCircle(
+        ProgressCircle(
+          strokeWidth: 6,
           size: containerWidth + 20,
-          strokeWidth: 6.0,
         ),
       ],
     );
@@ -201,9 +201,9 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
     const trailingWidth = 24.0;
     Widget? doneIcon;
     if (progress.currentBenchmark?.taskName == benchmarkInfo.taskName) {
-      doneIcon = const InfiniteProgressCircle(
-        size: trailingWidth,
+      doneIcon = const ProgressCircle(
         strokeWidth: 2,
+        size: trailingWidth - 4,
       );
     } else if (progress.completedBenchmarks.contains(benchmarkInfo)) {
       doneIcon = const Icon(
@@ -238,7 +238,7 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
       trailing: SizedBox(
         width: trailingWidth,
         height: trailingWidth,
-        child: doneIcon,
+        child: Center(child: doneIcon),
       ),
     );
   }

flutter/lib/ui/home/progress_circle.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+class ProgressCircle extends StatelessWidget {
+  final double strokeWidth;
+  final double size;
+
+  const ProgressCircle({
+    super.key,
+    required this.size,
+    required this.strokeWidth,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return _BorderedCircle(
+      strokeWidth: strokeWidth,
+      radius: size / 2,
+      color: Colors.white.withOpacity(0.88),
+    );
+  }
+}
+
+class _BorderedCircle extends StatelessWidget {
+  final double strokeWidth;
+  final double radius;
+  final Color color;
+
+  const _BorderedCircle({
+    required this.strokeWidth,
+    required this.radius,
+    required this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: DrawCircle(strokeWidth, radius, color),
+    );
+  }
+}
+
+class DrawCircle extends CustomPainter {
+  final double strokeWidth;
+  final double radius;
+  final Color color;
+
+  DrawCircle(this.strokeWidth, this.radius, this.color);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = color
+      ..strokeWidth = strokeWidth
+      ..style = PaintingStyle.stroke;
+    canvas.drawCircle(const Offset(0.0, 0.0), radius, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+}