TF-616 Update presentation layer for MarkAsReadMailbox

2022-06-30 11:16:20 +07:00
parent 71da676212
commit 589abfafb8
14 changed files with 246 additions and 134 deletions
@@ -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,
+        ));
+  }
 }
@@ -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>()
    ));
  }
 }
@@ -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>(),
    ));
  }
 }
@@ -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;
@@ -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];
-}
@@ -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));
-    }
-  }
-}
@@ -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>()));
@@ -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) {
-    consumeState(_markAsMailboxReadInteractor.execute(accountId, mailboxId, mailboxName));
+  void markAsReadMailbox(
+      AccountId accountId,
+      MailboxId mailboxId,
+      MailboxName mailboxName,
+      int totalEmailsUnread
+  ) {
+    consumeState(_markAsMailboxReadInteractor.execute(
+        accountId,
+        mailboxId,
+        mailboxName,
+        totalEmailsUnread,
+        _progressStateController));
  }

-  void _markAsReadMailboxSuccess(MarkAsMailboxReadAllSuccess success) {
-    if (currentContext != null && currentOverlayContext != null) {
-      _appToast.showToastWithIcon(
-          currentOverlayContext!,
-          widthToast: _responsiveUtils.isDesktop(currentContext!) ? 360 : null,
-          message: AppLocalizations.of(currentContext!)
-              .toastMessageMarkAsMailboxReadSuccess(success.mailboxName.name),
-          icon: _imagePaths.icReadToast);
+  void _markAsReadMailboxSuccess(Success success) {
+    viewStateMarkAsReadMailbox.value = Right(UIState.idle);
+
+    if (success is MarkAsMailboxReadAllSuccess) {
+      if (currentContext != null && currentOverlayContext != null) {
+        _appToast.showToastWithIcon(
+            currentOverlayContext!,
+            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();
  }
 }
@@ -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: [
-                Row(children: [
-                  Container(
-                    width: responsiveUtils.defaultSizeMenu,
-                    color: Colors.white,
-                    padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28),
-                    child: Row(children: [
-                      (SloganBuilder(arrangedByHorizontal: true)
-                          ..setSloganText(AppLocalizations.of(context).app_name)
-                          ..setSloganTextAlign(TextAlign.center)
-                          ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
-                          ..setSizeLogo(24)
-                          ..setLogo(imagePaths.icLogoTMail))
-                        .build(),
-                      Obx(() {
-                        if (controller.appInformation.value != null) {
-                          return Padding(padding: const EdgeInsets.only(top: 6),
-                            child: Text(
-                              'v.${controller.appInformation.value!.version}',
-                              textAlign: TextAlign.center,
-                              style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
-                            ));
-                        } else {
-                          return const SizedBox.shrink();
-                        }
-                      }),
-                    ])
-                  ),
-                  Expanded(child: Padding(
-                    padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
-                    child: _buildRightHeader(context)))
+              desktop: Container(
+                color: AppColor.colorBgDesktop,
+                child: Column(children: [
+                  Row(children: [
+                    Container(
+                      width: responsiveUtils.defaultSizeMenu,
+                      color: Colors.white,
+                      padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28),
+                      child: Row(children: [
+                        (SloganBuilder(arrangedByHorizontal: true)
+                            ..setSloganText(AppLocalizations.of(context).app_name)
+                            ..setSloganTextAlign(TextAlign.center)
+                            ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
+                            ..setSizeLogo(24)
+                            ..setLogo(imagePaths.icLogoTMail))
+                          .build(),
+                        Obx(() {
+                          if (controller.appInformation.value != null) {
+                            return Padding(padding: const EdgeInsets.only(top: 6),
+                              child: Text(
+                                'v.${controller.appInformation.value!.version}',
+                                textAlign: TextAlign.center,
+                                style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
+                              ));
+                          } else {
+                            return const SizedBox.shrink();
+                          }
+                        }),
+                      ])
+                    ),
+                    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();
+          });
+    });
+  }
 }
@@ -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();
          }
@@ -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();
+          });
+    });
+  }
 }
@@ -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",
@@ -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>()));
+  }
 }
@@ -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',