add loader on profile picture upload (#49)

Author: BenjaminCanape

lib/presentation/common/core/widgets/upload_file.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
+import '../utils/ui_utils.dart';
 
 import '../utils/color_utils.dart';
 
@@ -15,13 +16,18 @@ class UploadFileWidget extends HookConsumerWidget {
   /// The function to call after we chose the picture
   final Function callbackFunc;
 
+  final bool isUploading;
+
   final _picker = ImagePicker();
 
   /// Creates a [UploadFileWidget] widget.
   ///
   /// The [image] is the image to display.
   UploadFileWidget(
-      {super.key, required this.image, required this.callbackFunc});
+      {super.key,
+      required this.image,
+      required this.callbackFunc,
+      required this.isUploading});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -33,10 +39,14 @@ class UploadFileWidget extends HookConsumerWidget {
           width: 200,
           height: 200,
           color: ColorUtils.greyLight,
-          child: image != null
-              ? Image.memory(image!, fit: BoxFit.cover)
-              : Text(
-                  AppLocalizations.of(context)!.profile_picture_select_please),
+          child: isUploading
+              ? Center(
+                  child: UIUtils.loader,
+                )
+              : image != null
+                  ? Image.memory(image!, fit: BoxFit.cover)
+                  : Text(AppLocalizations.of(context)!
+                      .profile_picture_select_please),
         ),
       ),
       ElevatedButton(

lib/presentation/settings/screens/edit_profile_screen.dart

@@ -86,6 +86,8 @@ class EditProfileScreen extends HookConsumerWidget {
                                                 const SizedBox(height: 10),
                                                 UploadFileWidget(
                                                     image: profilePicture,
+                                                    isUploading:
+                                                        state.isUploading,
                                                     callbackFunc: provider
                                                         .chooseNewProfilePicture),
                                                 // Firstname TextFormField

lib/presentation/settings/view_model/edit_profile_view_model.dart

@@ -42,6 +42,7 @@ class EditProfileViewModel extends StateNotifier<EditProfileState> {
   }
 
   Future<void> chooseNewProfilePicture(Uint8List image) async {
+    state = state.copyWith(isUploading: true);
     ref
         .read(userRepositoryProvider)
         .uploadProfilePicture(image)
@@ -52,6 +53,7 @@ class EditProfileViewModel extends StateNotifier<EditProfileState> {
             .watch(profilePictureViewModelProvider(currentUser.id).notifier)
             .editProfilePicture(image);
       }
+      state = state.copyWith(isUploading: false);
     });
   }
 

lib/presentation/settings/view_model/state/edit_profile_state.dart

@@ -7,14 +7,16 @@ class EditProfileState {
   final Uint8List? profilePicture;
   final bool isEditing;
   final bool errorOnRequest;
+  final bool isUploading;
 
   /// Creates a new instance of [EditProfileState].
   const EditProfileState(
       {required this.firstname,
       required this.lastname,
       required this.profilePicture,
       required this.isEditing,
-      required this.errorOnRequest});
+      required this.errorOnRequest,
+      required this.isUploading});
 
   /// Creates the initial state for the edit profile screen.
   factory EditProfileState.initial() {
@@ -23,7 +25,8 @@ class EditProfileState {
         lastname: '',
         profilePicture: null,
         isEditing: false,
-        errorOnRequest: false);
+        errorOnRequest: false,
+        isUploading: false);
   }
 
   /// Creates a copy of this state object with the specified changes.
@@ -32,12 +35,14 @@ class EditProfileState {
       String? lastname,
       Uint8List? profilePicture,
       bool? isEditing,
-      bool? errorOnRequest}) {
+      bool? errorOnRequest,
+      bool? isUploading}) {
     return EditProfileState(
         firstname: firstname ?? this.firstname,
         lastname: lastname ?? this.lastname,
         profilePicture: profilePicture ?? this.profilePicture,
         isEditing: isEditing ?? this.isEditing,
-        errorOnRequest: errorOnRequest ?? this.errorOnRequest);
+        errorOnRequest: errorOnRequest ?? this.errorOnRequest,
+        isUploading: isUploading ?? this.isUploading);
   }
 }