TF-3502 Fix composer image loading icon

Author: tddang-linagora

lib/features/base/widget/circle_loading_widget.dart

@@ -5,12 +5,12 @@ class CircleLoadingWidget extends StatelessWidget {
 
   final double? size;
   final double? strokeWidth;
-  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
 
   const CircleLoadingWidget({
     super.key,
     this.size,
-    this.padding,
+    this.margin,
     this.strokeWidth,
   });
 
@@ -20,7 +20,7 @@ class CircleLoadingWidget extends StatelessWidget {
     final loadingStrokeWidth = strokeWidth ?? CircleLoadingWidgetStyles.width;
 
     return Container(
-      padding: padding,
+      margin: margin,
       width: loadingSize,
       height: loadingSize,
       child: CircularProgressIndicator(

lib/features/composer/presentation/composer_view.dart

@@ -256,7 +256,7 @@ class ComposerView extends GetWidget<ComposerController> {
                             child: InsertImageLoadingBarWidget(
                               uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
                               viewState: controller.viewState.value,
-                              padding: ComposerStyle.insertImageLoadingBarPadding,
+                              margin: ComposerStyle.insertImageLoadingBarMargin,
                             ),
                           )),
                           Obx(() => Padding(
@@ -435,7 +435,7 @@ class ComposerView extends GetWidget<ComposerController> {
                         child: InsertImageLoadingBarWidget(
                           uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
                           viewState: controller.viewState.value,
-                          padding: ComposerStyle.insertImageLoadingBarPadding,
+                          margin: ComposerStyle.insertImageLoadingBarMargin,
                         ),
                       )),
                       Obx(() => Padding(

lib/features/composer/presentation/composer_view_web.dart

@@ -285,7 +285,7 @@ class ComposerView extends GetWidget<ComposerController> {
                             child: Obx(() => InsertImageLoadingBarWidget(
                               uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
                               viewState: controller.viewState.value,
-                              padding: ComposerStyle.insertImageLoadingBarPadding,
+                              margin: ComposerStyle.insertImageLoadingBarMargin,
                             )),
                           ),
                           Obx(() {
@@ -600,7 +600,7 @@ class ComposerView extends GetWidget<ComposerController> {
                           child: Obx(() => InsertImageLoadingBarWidget(
                             uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
                             viewState: controller.viewState.value,
-                            padding: ComposerStyle.insertImageLoadingBarPadding,
+                            margin: ComposerStyle.insertImageLoadingBarMargin,
                           )),
                         ),
                         Obx(() {
@@ -917,7 +917,7 @@ class ComposerView extends GetWidget<ComposerController> {
                           child: Obx(() => InsertImageLoadingBarWidget(
                             uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
                             viewState: controller.viewState.value,
-                            padding: ComposerStyle.insertImageLoadingBarPadding,
+                            margin: ComposerStyle.insertImageLoadingBarMargin,
                           )),
                         ),
                         Obx(() {

lib/features/composer/presentation/styles/composer_style.dart

@@ -41,7 +41,7 @@ class ComposerStyle {
   static const EdgeInsetsGeometry mobileSubjectPadding = EdgeInsetsDirectional.only(end: 16);
   static const EdgeInsetsGeometry mobileEditorPadding = EdgeInsetsDirectional.symmetric(horizontal: 12);
   static const EdgeInsetsGeometry popupItemPadding = EdgeInsetsDirectional.symmetric(horizontal: 12);
-  static const EdgeInsetsGeometry insertImageLoadingBarPadding = EdgeInsetsDirectional.only(top: 12);
+  static const EdgeInsetsGeometry insertImageLoadingBarMargin = EdgeInsetsDirectional.only(top: 12);
 
   static const TextStyle popupItemTextStyle = TextStyle(
     color: Colors.black,

lib/features/composer/presentation/widgets/insert_image_loading_bar_widget.dart

@@ -1,44 +1,56 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/state/failure.dart';
 import 'package:core/presentation/state/success.dart';
 import 'package:dartz/dartz.dart';
 import 'package:flutter/material.dart';
-import 'package:tmail_ui_user/features/base/widget/circle_loading_widget.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/download_image_as_base64_state.dart';
 import 'package:tmail_ui_user/features/upload/domain/state/attachment_upload_state.dart';
 
 class InsertImageLoadingBarWidget extends StatelessWidget {
 
   final Either<Failure, Success> viewState;
   final Either<Failure, Success> uploadInlineViewState;
-  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
 
   const InsertImageLoadingBarWidget({
     super.key,
     required this.viewState,
     required this.uploadInlineViewState,
-    this.padding,
+    this.margin,
   });
 
   @override
   Widget build(BuildContext context) {
-    return uploadInlineViewState.fold(
+    final child = uploadInlineViewState.fold(
       (failure) => _viewStateToUI(viewState),
       (success) {
         if (success is UploadingAttachmentUploadState) {
-          return CircleLoadingWidget(padding: padding);
+          return const LinearProgressIndicator(
+            color: AppColor.primaryColor,
+            backgroundColor: AppColor.colorBgMailboxSelected,
+          );
         } else {
           return _viewStateToUI(viewState);
         }
       }
     );
+
+    return Container(
+      height: 2,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: child,
+    );
   }
 
   Widget _viewStateToUI(Either<Failure, Success> viewState) {
     return viewState.fold(
       (failure) => const SizedBox.shrink(),
       (success) {
         if (success is DownloadingImageAsBase64) {
-          return CircleLoadingWidget(padding: padding);
+          return const LinearProgressIndicator(
+            color: AppColor.primaryColor,
+            backgroundColor: AppColor.colorBgMailboxSelected,
+          );
         } else {
           return const SizedBox.shrink();
         }

lib/features/manage_account/presentation/profiles/identities/widgets/identity_loading_widget.dart

@@ -24,7 +24,7 @@ class IdentityLoadingWidget extends StatelessWidget {
         (failure) => const SizedBox.shrink(),
         (success) {
           if (success is GetAllIdentitiesLoading || success is GetSessionLoading) {
-            return const CircleLoadingWidget(padding: EdgeInsets.all(16.0));
+            return const CircleLoadingWidget(margin: EdgeInsets.all(16.0));
           } else {
             return const SizedBox.shrink();
           }
@@ -34,7 +34,7 @@ class IdentityLoadingWidget extends StatelessWidget {
         (failure) => const SizedBox.shrink(),
         (success) {
           if (success is GetAllIdentitiesLoading || success is GetSessionLoading) {
-            return const CircleLoadingWidget(padding: EdgeInsets.all(16.0));
+            return const CircleLoadingWidget(margin: EdgeInsets.all(16.0));
           } else {
             return const SizedBox.shrink();
           }