show check mark if toggle is successful

lib/ui/components/toggle_switch_widget.dart

@@ -2,6 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:photos/ente_theme_data.dart';
 import 'package:photos/ui/common/loading_widget.dart';
 
+enum ExecutionState {
+  idle,
+  inProgress,
+  successful,
+}
+
 typedef OnChangedCallBack = Future<void> Function();
 typedef ValueCallBack = bool Function();
 
@@ -20,23 +26,27 @@ class ToggleSwitchWidget extends StatefulWidget {
 
 class _ToggleSwitchWidgetState extends State<ToggleSwitchWidget> {
   late bool toggleValue;
-  late bool inProgress;
+  late ExecutionState executionState;
   @override
   void initState() {
     toggleValue = widget.value.call();
-    inProgress = false;
+    executionState = ExecutionState.idle;
     super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
     final enteColorScheme = Theme.of(context).colorScheme.enteTheme.colorScheme;
+    final Widget stateIcon = _stateIcon(enteColorScheme);
+
     return Row(
       children: [
-        inProgress
-            ? EnteLoadingWidget(color: enteColorScheme.strokeMuted)
-            : const SizedBox.shrink(),
-        const SizedBox(width: 8),
+        AnimatedSwitcher(
+          duration: const Duration(milliseconds: 200),
+          switchInCurve: Curves.easeInExpo,
+          switchOutCurve: Curves.easeOutExpo,
+          child: stateIcon,
+        ),
         SizedBox(
           height: 32,
           child: FittedBox(
@@ -49,13 +59,22 @@ class _ToggleSwitchWidgetState extends State<ToggleSwitchWidget> {
               onChanged: (negationOfToggleValue) async {
                 setState(() {
                   toggleValue = negationOfToggleValue;
-                  inProgress = true;
+                  executionState = ExecutionState.inProgress;
                 });
                 await widget.onChanged.call();
                 setState(() {
                   final newValue = widget.value.call();
                   toggleValue = newValue;
-                  inProgress = false;
+                  if (toggleValue == newValue) {
+                    executionState = ExecutionState.successful;
+                    Future.delayed(const Duration(seconds: 1), () {
+                      setState(() {
+                        executionState = ExecutionState.idle;
+                      });
+                    });
+                  } else {
+                    executionState = ExecutionState.idle;
+                  }
                 });
               },
             ),
@@ -64,4 +83,21 @@ class _ToggleSwitchWidgetState extends State<ToggleSwitchWidget> {
       ],
     );
   }
+
+  Widget _stateIcon(enteColorScheme) {
+    if (executionState == ExecutionState.idle) {
+      return const SizedBox.shrink();
+    } else if (executionState == ExecutionState.inProgress) {
+      return EnteLoadingWidget(
+        color: enteColorScheme.strokeMuted,
+      );
+    } else if (executionState == ExecutionState.successful) {
+      return Icon(
+        Icons.check_outlined,
+        color: enteColorScheme.primary500,
+      );
+    } else {
+      return const SizedBox.shrink();
+    }
+  }
 }