From f1b09c909cfb7a51f0122e45fcf70cf91c730613 Mon Sep 17 00:00:00 2001
From: Maxime GRANDCOLAS <maxime.grandcolas@scille.fr>
Date: Mon, 15 Jan 2024 11:34:51 +0100
Subject: [PATCH] [MS] Fixes animation for toast progress bar

---
 client/src/services/toastManager.ts     | 24 +++++++++++++++---------
 client/src/theme/components/toasts.scss |  2 +-
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/services/toastManager.ts b/client/src/services/toastManager.ts
index 2b17191cb78..d70f5aa0213 100644
--- a/client/src/services/toastManager.ts
+++ b/client/src/services/toastManager.ts
@@ -5,7 +5,7 @@ import { translate } from '@/services/translation';
 import { toastController } from '@ionic/vue';
 import { checkmark, closeCircle, information, warning } from 'ionicons/icons';
 
-const DEFAULT_TOAST_DURATION = 3000;
+const DEFAULT_TOAST_DURATION = 5000;
 
 export class ToastManager {
   toasts: HTMLIonToastElement[];
@@ -23,12 +23,14 @@ export class ToastManager {
     confirmButtonLabel?: string;
     duration?: number;
   }): Promise<any> {
+    const duration = toastConfig.duration || DEFAULT_TOAST_DURATION;
+
     const toast = await toastController.create({
       header: toastConfig.title,
       message: toastConfig.message,
       cssClass: ['notification-toast', toastConfig.theme],
       mode: 'ios',
-      duration: toastConfig.duration ?? DEFAULT_TOAST_DURATION,
+      duration: duration,
       icon: toastConfig.theme ? this._getIcon(toastConfig.theme) : toastConfig.icon,
       buttons: [
         {
@@ -38,13 +40,8 @@ export class ToastManager {
         },
       ],
     });
-    this.toasts.push(toast);
-    const toastActive = toast;
-    // when the class active is added progress bar width is set to 0%
-    setTimeout(() => {
-      toastActive.classList.add('active');
-    }, 100);
 
+    this.toasts.push(toast);
     await this.managePresentQueue();
 
     const result = await toast.onDidDismiss();
@@ -56,7 +53,16 @@ export class ToastManager {
   }
 
   async managePresentQueue(): Promise<any> {
-    await this.toasts.at(0)?.present();
+    const currentToast = this.toasts.at(0);
+
+    if (currentToast) {
+      document.documentElement.style.setProperty('--ms-toast-duration', `${currentToast.duration}ms`);
+      // when the class active is added progress bar width is set to 0%
+      setTimeout(() => {
+        currentToast.classList.add('active');
+      }, 100);
+      await currentToast.present();
+    }
   }
 
   private _getIcon(theme: MsReportTheme): string {
diff --git a/client/src/theme/components/toasts.scss b/client/src/theme/components/toasts.scss
index a650ac5ad9f..773afd0966a 100644
--- a/client/src/theme/components/toasts.scss
+++ b/client/src/theme/components/toasts.scss
@@ -85,7 +85,7 @@ ion-toast.notification-toast {
     &::part(container) {
       &::after {
         width: 0%;
-        transition: width 5s ease-in-out;
+        transition: width var(--ms-toast-duration) ease-in-out;
       }
     }
   }