TF-616 Update presentation layer for MarkAsReadMailbox

lib/features/base/mixin/app_loader_mixin.dart

@@ -1,6 +1,8 @@
 
 import 'package:core/core.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:percent_indicator/linear_percent_indicator.dart';
 
 mixin AppLoaderMixin {
 
@@ -10,4 +12,23 @@ mixin AppLoaderMixin {
         height: 24,
         child: CupertinoActivityIndicator(color: AppColor.colorLoading)));
   }
+
+  Widget get horizontalLoadingWidget {
+    return const Center(
+        child: LinearProgressIndicator(
+          color: AppColor.primaryColor,
+          minHeight: 3,
+          backgroundColor: AppColor.colorBgMailboxSelected));
+  }
+
+  Widget horizontalPercentLoadingWidget(double percent) {
+    return Center(
+        child: LinearPercentIndicator(
+          lineHeight: 3.0,
+          percent: percent > 1.0 ? 1.0 : percent,
+          barRadius: const Radius.circular(4),
+          backgroundColor: AppColor.colorBgMailboxSelected,
+          progressColor: AppColor.primaryColor,
+        ));
+  }
 }

lib/features/destination_picker/presentation/destination_picker_bindings.dart

@@ -13,6 +13,7 @@ import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/mailbox_data
 import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/state_datasource_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_api.dart';
 import 'package:tmail_ui_user/features/mailbox/data/local/mailbox_cache_manager.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_isolate_worker.dart';
 import 'package:tmail_ui_user/features/mailbox/data/repository/mailbox_repository_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
@@ -53,7 +54,7 @@ class DestinationPickerBindings extends BaseBindings {
 
   @override
   void bindingsDataSourceImpl() {
-    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>()));
+    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>(), Get.find<MailboxIsolateWorker>()));
     Get.lazyPut(() => MailboxCacheDataSourceImpl(Get.find<MailboxCacheManager>()));
     Get.lazyPut(() => StateDataSourceImpl(Get.find<StateCacheClient>()));
     Get.lazyPut(() => EmailDataSourceImpl(Get.find<EmailAPI>()));
@@ -79,8 +80,6 @@ class DestinationPickerBindings extends BaseBindings {
           DataSourceType.local: Get.find<MailboxCacheDataSourceImpl>()
         },
         Get.find<StateDataSource>(),
-        Get.find<ThreadDataSource>(),
-        Get.find<EmailDataSource>()
     ));
   }
 }

lib/features/mailbox/presentation/mailbox_bindings.dart

@@ -15,6 +15,7 @@ import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/mailbox_data
 import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/state_datasource_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/data/local/mailbox_cache_manager.dart';
 import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_api.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_isolate_worker.dart';
 import 'package:tmail_ui_user/features/mailbox/data/repository/mailbox_repository_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/create_new_mailbox_interactor.dart';
@@ -71,7 +72,7 @@ class MailboxBindings extends BaseBindings {
 
   @override
   void bindingsDataSourceImpl() {
-    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>()));
+    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>(), Get.find<MailboxIsolateWorker>()));
     Get.lazyPut(() => MailboxCacheDataSourceImpl(Get.find<MailboxCacheManager>()));
     Get.lazyPut(() => StateDataSourceImpl(Get.find<StateCacheClient>()));
     Get.lazyPut(() => EmailDataSourceImpl(Get.find<EmailAPI>()));
@@ -105,8 +106,6 @@ class MailboxBindings extends BaseBindings {
         DataSourceType.local: Get.find<MailboxCacheDataSourceImpl>()
       },
       Get.find<StateDataSource>(),
-      Get.find<ThreadDataSource>(),
-      Get.find<EmailDataSource>(),
     ));
   }
 }

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -54,7 +54,7 @@ import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_na
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/extensions/validator_failure_extension.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/mailbox_creator_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/new_mailbox_arguments.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/mark_as_mailbox_read_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
@@ -227,6 +227,7 @@ class MailboxController extends BaseMailboxController {
               success is RemoveEmailDraftsSuccess ||
               success is SendEmailSuccess ||
               success is MarkAsMailboxReadAllSuccess ||
+              success is MarkAsMailboxReadHasSomeEmailFailure ||
               success is UpdateEmailDraftsSuccess) {
             refreshMailboxChanges();
           }
@@ -502,7 +503,7 @@ class MailboxController extends BaseMailboxController {
         _openDialogRenameMailboxAction(context, selectionMailbox.first);
         break;
       case MailboxActions.markAsRead:
-        _markAsReadMailboxAction(selectionMailbox.first);
+        _markAsReadMailboxAction(context, selectionMailbox.first);
         break;
       case MailboxActions.move:
         _moveMailboxAction(selectionMailbox.first);
@@ -679,12 +680,19 @@ class MailboxController extends BaseMailboxController {
     _cancelSelectMailbox();
   }
 
-  void _markAsReadMailboxAction(PresentationMailbox presentationMailbox) {
+  void _markAsReadMailboxAction(BuildContext context, PresentationMailbox presentationMailbox) {
     final accountId = mailboxDashBoardController.accountId.value;
     final mailboxId = presentationMailbox.id;
     final mailboxName = presentationMailbox.name;
+    final countEmailsUnread = presentationMailbox.unreadEmails?.value.value ?? 0;
     if (accountId != null && mailboxName != null) {
-      mailboxDashBoardController.markAsReadMailbox(accountId, mailboxId, mailboxName);
+      mailboxDashBoardController.markAsReadMailbox(
+          accountId,
+          mailboxId,
+          mailboxName,
+          countEmailsUnread.toInt());
+
+      closeMailboxScreen(context);
     }
   }
 
@@ -809,7 +817,7 @@ class MailboxController extends BaseMailboxController {
         _moveMailboxAction(mailbox);
         break;
       case MailboxActions.markAsRead:
-        _markAsReadMailboxAction(mailbox);
+        _markAsReadMailboxAction(context, mailbox);
         break;
       default:
         break;

lib/features/mailbox_dashboard/domain/state/mark_as_mailbox_read_state.dart

@@ -1,37 +0,0 @@
-import 'package:core/core.dart';
-import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
-
-class MarkAsMailboxReadLoading extends UIState {
-
-  MarkAsMailboxReadLoading();
-
-  @override
-  List<Object?> get props => [];
-}
-
-class MarkAsMailboxReadAllSuccess extends UIState {
-
-  final MailboxName mailboxName;
-
-  MarkAsMailboxReadAllSuccess(this.mailboxName);
-
-  @override
-  List<Object?> get props => [mailboxName];
-}
-
-class MarkAsMailboxReadHasSomeEmailFailure extends FeatureFailure {
-
-  MarkAsMailboxReadHasSomeEmailFailure();
-
-  @override
-  List<Object?> get props => [];
-}
-
-class MarkAsMailboxReadFailure extends FeatureFailure {
-  final dynamic exception;
-
-  MarkAsMailboxReadFailure(this.exception);
-
-  @override
-  List<Object> get props => [exception];
-}

lib/features/mailbox_dashboard/domain/usecases/mark_as_mailbox_read_interactor.dart

@@ -1,27 +0,0 @@
-import 'package:core/core.dart';
-import 'package:dartz/dartz.dart';
-import 'package:jmap_dart_client/jmap/account_id.dart';
-import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
-import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/mark_as_mailbox_read_state.dart';
-
-class MarkAsMailboxReadInteractor {
-  final MailboxRepository _mailboxRepository;
-
-  MarkAsMailboxReadInteractor(this._mailboxRepository);
-
-  Stream<Either<Failure, Success>> execute(AccountId accountId,
-      MailboxId mailboxId, MailboxName mailboxName) async* {
-    try {
-      yield Right<Failure, Success>(MarkAsMailboxReadLoading());
-      final result = await _mailboxRepository.markAsMailboxRead(accountId, mailboxId, mailboxName);
-      if (result) {
-        yield Right(MarkAsMailboxReadAllSuccess(mailboxName));
-      } else {
-        yield Left(MarkAsMailboxReadHasSomeEmailFailure());
-      }
-    } catch (e) {
-      yield Left(MarkAsMailboxReadFailure(e));
-    }
-  }
-}

lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart

@@ -46,6 +46,7 @@ import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/mailbox_data
 import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/state_datasource_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/data/local/mailbox_cache_manager.dart';
 import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_api.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_isolate_worker.dart';
 import 'package:tmail_ui_user/features/mailbox/data/repository/mailbox_repository_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_bindings.dart';
@@ -55,7 +56,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/data/repository/search_
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/repository/search_repository.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_all_recent_search_latest_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/mark_as_mailbox_read_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/mark_as_mailbox_read_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/quick_search_email_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/save_recent_search_interactor.dart';
@@ -123,7 +124,7 @@ class MailboxDashBoardBindings extends BaseBindings {
     Get.lazyPut(() => ThreadDataSourceImpl(Get.find<ThreadAPI>()));
     Get.lazyPut(() => LocalThreadDataSourceImpl(Get.find<EmailCacheManager>()));
     Get.lazyPut(() => StateDataSourceImpl(Get.find<StateCacheClient>()));
-    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>()));
+    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>(), Get.find<MailboxIsolateWorker>()));
     Get.lazyPut(() => MailboxCacheDataSourceImpl(Get.find<MailboxCacheManager>()));
     Get.lazyPut(() => HiveAccountDatasourceImpl(Get.find<AccountCacheManager>()));
     Get.lazyPut(() => AuthenticationOIDCDataSourceImpl(
@@ -200,8 +201,6 @@ class MailboxDashBoardBindings extends BaseBindings {
         DataSourceType.local: Get.find<MailboxCacheDataSourceImpl>()
       },
       Get.find<StateDataSource>(),
-      Get.find<ThreadDataSource>(),
-      Get.find<EmailDataSource>(),
     ));
     Get.lazyPut(() => AccountRepositoryImpl(Get.find<AccountDatasource>()));
     Get.lazyPut(() => AuthenticationOIDCRepositoryImpl(Get.find<AuthenticationOIDCDataSource>()));

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -32,9 +32,9 @@ import 'package:tmail_ui_user/features/email/domain/usecases/move_to_mailbox_int
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/login/domain/usecases/delete_authority_oidc_interactor.dart';
 import 'package:tmail_ui_user/features/login/domain/usecases/get_authenticated_account_interactor.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/mark_as_mailbox_read_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/mark_as_mailbox_read_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/mark_as_mailbox_read_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/search_controller.dart';
@@ -50,6 +50,7 @@ import 'package:tmail_ui_user/main/routes/app_routes.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 import 'package:tmail_ui_user/main/routes/router_arguments.dart';
 import 'package:tmail_ui_user/main/utils/email_receive_manager.dart';
+import 'package:worker_manager/worker_manager.dart';
 
 class MailboxDashBoardController extends ReloadableController {
 
@@ -60,6 +61,7 @@ class MailboxDashBoardController extends ReloadableController {
   final ResponsiveUtils _responsiveUtils = Get.find<ResponsiveUtils>();
   final EmailReceiveManager _emailReceiveManager = Get.find<EmailReceiveManager>();
   final SearchController searchController = Get.find<SearchController>();
+  final Executor _isolateExecutor = Get.find<Executor>();
 
   final MoveToMailboxInteractor _moveToMailboxInteractor;
   final DeleteEmailPermanentlyInteractor _deleteEmailPermanentlyInteractor;
@@ -77,6 +79,7 @@ class MailboxDashBoardController extends ReloadableController {
   final filterMessageOption = FilterMessageOption.all.obs;
   final listEmailSelected = <PresentationEmail>[].obs;
   final composerOverlayState = ComposerOverlayState.inActive.obs;
+  final viewStateMarkAsReadMailbox = Rx<Either<Failure, Success>>(Right(UIState.idle));
 
   Session? sessionCurrent;
   Map<Role, MailboxId> mapDefaultMailboxId = {};
@@ -85,6 +88,10 @@ class MailboxDashBoardController extends ReloadableController {
   late StreamSubscription _connectivityStreamSubscription;
   late StreamSubscription _emailReceiveManagerStreamSubscription;
 
+  final StreamController<Either<Failure, Success>> _progressStateController =
+    StreamController<Either<Failure, Success>>.broadcast();
+  Stream<Either<Failure, Success>> get progressState => _progressStateController.stream;
+
   MailboxDashBoardController(
     LogoutOidcInteractor logoutOidcInteractor,
     DeleteAuthorityOidcInteractor deleteAuthorityOidcInteractor,
@@ -100,6 +107,7 @@ class MailboxDashBoardController extends ReloadableController {
   void onInit() {
     _registerNetworkConnectivityState();
     _registerPendingEmailAddress();
+    _initializeIsolateExecutor();
     super.onInit();
   }
 
@@ -145,6 +153,9 @@ class MailboxDashBoardController extends ReloadableController {
             || failure is RemoveEmailDraftsFailure
             || failure is UpdateEmailDraftsFailure) {
           clearState();
+        } else if (failure is MarkAsMailboxReadAllFailure ||
+            failure is MarkAsMailboxReadFailure) {
+          _markAsReadMailboxFailure(failure);
         }
       },
       (success) {
@@ -163,7 +174,8 @@ class MailboxDashBoardController extends ReloadableController {
           _moveToMailboxSuccess(success);
         } else if (success is DeleteEmailPermanentlySuccess) {
           _deleteEmailPermanentlySuccess(success);
-        } else if (success is MarkAsMailboxReadAllSuccess) {
+        } else if (success is MarkAsMailboxReadAllSuccess ||
+            success is MarkAsMailboxReadHasSomeEmailFailure) {
           _markAsReadMailboxSuccess(success);
         }
       }
@@ -199,6 +211,14 @@ class MailboxDashBoardController extends ReloadableController {
         });
   }
 
+  void _initializeIsolateExecutor() async {
+    await _isolateExecutor.warmUp(log: BuildUtils.isDebugMode);
+
+    progressState.listen((state) {
+      viewStateMarkAsReadMailbox.value = state;
+    });
+  }
+
   void _getUserProfile() async {
     userProfile.value = sessionCurrent != null ? UserProfile(sessionCurrent!.username.value) : null;
   }
@@ -411,26 +431,54 @@ class MailboxDashBoardController extends ReloadableController {
     final currentAccountId = accountId.value;
     final mailboxId = selectedMailbox.value?.id;
     final mailboxName = selectedMailbox.value?.name;
+    final countEmailsUnread = selectedMailbox.value?.unreadEmails?.value.value ?? 0;
     if (currentAccountId != null && mailboxId != null && mailboxName != null) {
-      markAsReadMailbox(currentAccountId, mailboxId, mailboxName);
+      markAsReadMailbox(currentAccountId, mailboxId, mailboxName, countEmailsUnread.toInt());
     }
   }
 
-  void markAsReadMailbox(AccountId accountId, MailboxId mailboxId, MailboxName mailboxName) {
+  void markAsReadMailbox(
-    consumeState(_markAsMailboxReadInteractor.execute(accountId, mailboxId, mailboxName));
+      AccountId accountId,
+      MailboxId mailboxId,
+      MailboxName mailboxName,
+      int totalEmailsUnread
+  ) {
+    consumeState(_markAsMailboxReadInteractor.execute(
+        accountId,
+        mailboxId,
+        mailboxName,
+        totalEmailsUnread,
+        _progressStateController));
   }
 
-  void _markAsReadMailboxSuccess(MarkAsMailboxReadAllSuccess success) {
+  void _markAsReadMailboxSuccess(Success success) {
-    if (currentContext != null && currentOverlayContext != null) {
+    viewStateMarkAsReadMailbox.value = Right(UIState.idle);
-      _appToast.showToastWithIcon(
+
-          currentOverlayContext!,
+    if (success is MarkAsMailboxReadAllSuccess) {
-          widthToast: _responsiveUtils.isDesktop(currentContext!) ? 360 : null,
+      if (currentContext != null && currentOverlayContext != null) {
-          message: AppLocalizations.of(currentContext!)
+        _appToast.showToastWithIcon(
-              .toastMessageMarkAsMailboxReadSuccess(success.mailboxName.name),
+            currentOverlayContext!,
-          icon: _imagePaths.icReadToast);
+            widthToast: _responsiveUtils.isDesktop(currentContext!) ? 360 : null,
+            message: AppLocalizations.of(currentContext!)
+                .toastMessageMarkAsMailboxReadSuccess(success.mailboxName.name),
+            icon: _imagePaths.icReadToast);
+      }
+    } else if (success is MarkAsMailboxReadHasSomeEmailFailure) {
+      if (currentContext != null && currentOverlayContext != null) {
+        _appToast.showToastWithIcon(
+            currentOverlayContext!,
+            widthToast: _responsiveUtils.isDesktop(currentContext!) ? 360 : null,
+            message: AppLocalizations.of(currentContext!)
+                .toastMessageMarkAsMailboxReadHasSomeEmailFailure(success.mailboxName.name, success.countEmailsRead),
+            icon: _imagePaths.icReadToast);
+      }
     }
   }
 
+  void _markAsReadMailboxFailure(Failure failure) {
+    viewStateMarkAsReadMailbox.value = Right(UIState.idle);
+  }
+
   void goToComposer(ComposerArguments arguments) {
     if (BuildUtils.isWeb) {
       if (composerOverlayState.value == ComposerOverlayState.inActive) {
@@ -479,6 +527,8 @@ class MailboxDashBoardController extends ReloadableController {
     _emailReceiveManager.closeEmailReceiveManagerStream();
     _emailReceiveManagerStreamSubscription.cancel();
     _connectivityStreamSubscription.cancel();
+    _progressStateController.close();
+    _isolateExecutor.dispose();
     super.onClose();
   }
 }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -6,6 +6,7 @@ import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_view_web.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_search.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
@@ -55,46 +56,53 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
         child: Stack(children: [
           ResponsiveWidget(
               responsiveUtils: responsiveUtils,
-              desktop: Column(children: [
+              desktop: Container(
-                Row(children: [
+                color: AppColor.colorBgDesktop,
-                  Container(
+                child: Column(children: [
-                    width: responsiveUtils.defaultSizeMenu,
+                  Row(children: [
-                    color: Colors.white,
+                    Container(
-                    padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28),
+                      width: responsiveUtils.defaultSizeMenu,
-                    child: Row(children: [
+                      color: Colors.white,
-                      (SloganBuilder(arrangedByHorizontal: true)
+                      padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28),
-                          ..setSloganText(AppLocalizations.of(context).app_name)
+                      child: Row(children: [
-                          ..setSloganTextAlign(TextAlign.center)
+                        (SloganBuilder(arrangedByHorizontal: true)
-                          ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
+                            ..setSloganText(AppLocalizations.of(context).app_name)
-                          ..setSizeLogo(24)
+                            ..setSloganTextAlign(TextAlign.center)
-                          ..setLogo(imagePaths.icLogoTMail))
+                            ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
-                        .build(),
+                            ..setSizeLogo(24)
-                      Obx(() {
+                            ..setLogo(imagePaths.icLogoTMail))
-                        if (controller.appInformation.value != null) {
+                          .build(),
-                          return Padding(padding: const EdgeInsets.only(top: 6),
+                        Obx(() {
-                            child: Text(
+                          if (controller.appInformation.value != null) {
-                              'v.${controller.appInformation.value!.version}',
+                            return Padding(padding: const EdgeInsets.only(top: 6),
-                              textAlign: TextAlign.center,
+                              child: Text(
-                              style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
+                                'v.${controller.appInformation.value!.version}',
-                            ));
+                                textAlign: TextAlign.center,
-                        } else {
+                                style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
-                          return const SizedBox.shrink();
+                              ));
-                        }
+                          } else {
-                      }),
+                            return const SizedBox.shrink();
-                    ])
+                          }
-                  ),
+                        }),
-                  Expanded(child: Padding(
+                      ])
-                    padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
+                    ),
-                    child: _buildRightHeader(context)))
+                    Expanded(child: Container(
+                      color: Colors.white,
+                      padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
+                      child: _buildRightHeader(context)))
+                  ]),
+                  Expanded(child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
+                      Expanded(child: Column(children: [
+                        _buildMarkAsMailboxReadLoading(context),
+                        Expanded(child: _wrapContainerForThreadAndEmail(context))
+                      ]))
+                    ],
+                  ))
                 ]),
-                Expanded(child: Row(
+              ),
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
-                    Expanded(child: _wrapContainerForThreadAndEmail(context))
-                  ],
-                ))
-              ]),
               tabletLarge: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -602,4 +610,33 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
         ]
     );
   }
+
+  Widget _buildMarkAsMailboxReadLoading(BuildContext context) {
+    return Obx(() {
+      final viewState = controller.viewStateMarkAsReadMailbox.value;
+      return viewState.fold(
+          (failure) => const SizedBox.shrink(),
+          (success) {
+            if (success is MarkAsMailboxReadLoading) {
+              return Padding(
+                  padding: EdgeInsets.only(
+                      top: responsiveUtils.isDesktop(context) ? 16 : 0,
+                      left: 16,
+                      right: 16,
+                      bottom: responsiveUtils.isDesktop(context) ? 0 : 16),
+                  child: horizontalLoadingWidget);
+            } else if (success is UpdatingMarkAsMailboxReadState) {
+              final percent = success.countRead / success.totalUnread;
+              return Padding(
+                  padding: EdgeInsets.only(
+                      top: responsiveUtils.isDesktop(context) ? 16 : 0,
+                      left: 16,
+                      right: 16,
+                      bottom: responsiveUtils.isDesktop(context) ? 0 : 16),
+                  child: horizontalPercentLoadingWidget(percent));
+            }
+            return const SizedBox.shrink();
+          });
+    });
+  }
 }

lib/features/thread/presentation/thread_controller.dart

@@ -34,7 +34,7 @@ import 'package:tmail_ui_user/features/email/domain/usecases/mark_as_star_email_
 import 'package:tmail_ui_user/features/email/domain/usecases/move_to_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/mark_as_mailbox_read_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
@@ -299,6 +299,7 @@ class ThreadController extends BaseController {
               || success is RemoveEmailDraftsSuccess
               || success is SendEmailSuccess
               || success is MarkAsMailboxReadAllSuccess
+              || success is MarkAsMailboxReadHasSomeEmailFailure
               || success is UpdateEmailDraftsSuccess) {
             _refreshEmailChanges();
           }

lib/features/thread/presentation/thread_view.dart

@@ -7,6 +7,7 @@ import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_search.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/filter_email_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_receive_time_type.dart';
@@ -102,6 +103,8 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
                           return const SizedBox.shrink();
                         }
                       }),
+                      if (!_responsiveUtils.isDesktop(context))
+                        _buildMarkAsMailboxReadLoading(context),
                       Expanded(child: Container(
                           alignment: Alignment.center,
                           margin: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
@@ -805,4 +808,33 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
           ]));
     });
   }
+
+  Widget _buildMarkAsMailboxReadLoading(BuildContext context) {
+    return Obx(() {
+      final viewState = controller.mailboxDashBoardController.viewStateMarkAsReadMailbox.value;
+      return viewState.fold(
+        (failure) => const SizedBox.shrink(),
+        (success) {
+          if (success is MarkAsMailboxReadLoading) {
+            return Padding(
+                padding: EdgeInsets.only(
+                    top: _responsiveUtils.isDesktop(context) ? 16 : 0,
+                    left: 16,
+                    right: 16,
+                    bottom: _responsiveUtils.isDesktop(context) ? 0 : 16),
+                child: horizontalLoadingWidget);
+          } else if (success is UpdatingMarkAsMailboxReadState) {
+            final percent = success.countRead / success.totalUnread;
+            return Padding(
+                padding: EdgeInsets.only(
+                    top: _responsiveUtils.isDesktop(context) ? 16 : 0,
+                    left: 16,
+                    right: 16,
+                    bottom: _responsiveUtils.isDesktop(context) ? 0 : 16),
+                child: horizontalPercentLoadingWidget(percent));
+          }
+          return const SizedBox.shrink();
+          });
+    });
+  }
 }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-06-29T12:21:47.830137",
+  "@@last_modified": "2022-06-28T17:58:17.546714",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -1388,6 +1388,18 @@
       "mailboxName": {}
     }
   },
+  "toastMessageMarkAsMailboxReadHasSomeEmailFailure": "You’ve marked {count} messages in \"{mailboxName}\" as read",
+  "@toastMessageMarkAsMailboxReadHasSomeEmailFailure": {
+    "type": "text",
+    "placeholders_order": [
+      "mailboxName",
+      "count"
+    ],
+    "placeholders": {
+      "mailboxName": {},
+      "count": {}
+    }
+  },
   "allMailboxes": "All mailboxes",
   "@allMailboxes": {
     "type": "text",

lib/main/bindings/network/network_bindings.dart

@@ -16,8 +16,10 @@ import 'package:tmail_ui_user/features/login/data/network/config/authorization_i
 import 'package:tmail_ui_user/features/login/data/network/oidc_http_client.dart';
 import 'package:tmail_ui_user/features/login/data/utils/library_platform/app_auth_plugin/app_auth_plugin.dart';
 import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_api.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_isolate_worker.dart';
 import 'package:tmail_ui_user/features/session/data/network/session_api.dart';
 import 'package:tmail_ui_user/features/thread/data/network/thread_api.dart';
+import 'package:worker_manager/worker_manager.dart';
 
 class NetworkBindings extends Bindings {
 
@@ -25,6 +27,7 @@ class NetworkBindings extends Bindings {
   void dependencies() {
     _bindingDio();
     _bindingApi();
+    _bindingIsolateWorker();
     _bindingConnection();
     _bindingException();
   }
@@ -83,4 +86,12 @@ class NetworkBindings extends Bindings {
   void _bindingException() {
     Get.put(RemoteExceptionThrower());
   }
+
+  void _bindingIsolateWorker() {
+    Get.put(Executor());
+    Get.put(MailboxIsolateWorker(
+        Get.find<ThreadAPI>(),
+        Get.find<EmailAPI>(),
+        Get.find<Executor>()));
+  }
 }

lib/main/localizations/app_localizations.dart

@@ -1420,6 +1420,13 @@ class AppLocalizations {
         args: [mailboxName]);
   }
 
+  String toastMessageMarkAsMailboxReadHasSomeEmailFailure(String mailboxName, int count) {
+    return Intl.message(
+        'You’ve marked $count messages in "$mailboxName" as read',
+        name: 'toastMessageMarkAsMailboxReadHasSomeEmailFailure',
+        args: [mailboxName, count]);
+  }
+
   String get allMailboxes {
     return Intl.message(
         'All mailboxes',