From 33c843e5d8f1192a6133b58e1572e1dca82cde45 Mon Sep 17 00:00:00 2001
From: Neeraj Gupta <254676+ua741@users.noreply.github.com>
Date: Fri, 30 Aug 2024 16:57:45 +0530
Subject: [PATCH] [auth][perf] Reduce redundant painting

---
 auth/lib/ui/code_timer_progress.dart | 67 ++++++++++++++++++++--------
 1 file changed, 49 insertions(+), 18 deletions(-)

diff --git a/auth/lib/ui/code_timer_progress.dart b/auth/lib/ui/code_timer_progress.dart
index a215f0ca02..98538788ed 100644
--- a/auth/lib/ui/code_timer_progress.dart
+++ b/auth/lib/ui/code_timer_progress.dart
@@ -1,48 +1,45 @@
 import 'package:ente_auth/theme/ente_theme.dart';
-import 'package:ente_auth/ui/linear_progress_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 
 class CodeTimerProgress extends StatefulWidget {
   final int period;
 
-  CodeTimerProgress({
+  const CodeTimerProgress({
     super.key,
     required this.period,
   });
 
   @override
-  State createState() => _CodeTimerProgressState();
+  State<CodeTimerProgress> createState() => _CodeTimerProgressState();
 }
 
 class _CodeTimerProgressState extends State<CodeTimerProgress>
     with SingleTickerProviderStateMixin {
   late final Ticker _ticker;
-  double _progress = 0.0;
+  late final ValueNotifier<double> _progress;
   late final int _microSecondsInPeriod;
 
   @override
   void initState() {
     super.initState();
     _microSecondsInPeriod = widget.period * 1000000;
-    _ticker = createTicker((elapsed) {
-      _updateTimeRemaining();
-    });
+    _progress = ValueNotifier<double>(0.0);
+    _ticker = createTicker(_updateTimeRemaining);
     _ticker.start();
-    _updateTimeRemaining();
+    _updateTimeRemaining(Duration.zero);
   }
 
-  void _updateTimeRemaining() {
-    int timeRemaining = (_microSecondsInPeriod) -
+  void _updateTimeRemaining(Duration elapsed) {
+    int timeRemaining = _microSecondsInPeriod -
         (DateTime.now().microsecondsSinceEpoch % _microSecondsInPeriod);
-    setState(() {
-      _progress = (timeRemaining / _microSecondsInPeriod);
-    });
+    _progress.value = timeRemaining / _microSecondsInPeriod;
   }
 
   @override
   void dispose() {
     _ticker.dispose();
+    _progress.dispose();
     super.dispose();
   }
 
@@ -50,12 +47,46 @@ class _CodeTimerProgressState extends State<CodeTimerProgress>
   Widget build(BuildContext context) {
     return SizedBox(
       height: 3,
-      child: LinearProgressWidget(
-        color: _progress > 0.4
-            ? getEnteColorScheme(context).primary700
-            : Colors.orange,
-        fractionOfStorage: _progress,
+      child: ValueListenableBuilder<double>(
+        valueListenable: _progress,
+        builder: (context, progress, _) {
+          return CustomPaint(
+            painter: _ProgressPainter(
+              progress: progress,
+              color: progress > 0.4
+                  ? getEnteColorScheme(context).primary700
+                  : Colors.orange,
+            ),
+            size: Size.infinite,
+          );
+        },
       ),
     );
   }
 }
+
+class _ProgressPainter extends CustomPainter {
+  final double progress;
+  final Color color;
+
+  _ProgressPainter({required this.progress, required this.color});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.fill;
+
+    final rect = RRect.fromRectAndRadius(
+      Rect.fromLTWH(0, 0, size.width * progress, size.height),
+      const Radius.circular(2),
+    );
+
+    canvas.drawRRect(rect, paint);
+  }
+
+  @override
+  bool shouldRepaint(_ProgressPainter oldDelegate) {
+    return oldDelegate.progress != progress || oldDelegate.color != color;
+  }
+}