fix: show toast for infinite duration

models/baseModels/ERPNextSyncSettings/ERPNextSyncSettings.ts

@@ -43,6 +43,12 @@ export class ERPNextSyncSettings extends Doc {
 
   async change(ch: ChangeArg) {
     if (ch.changed === 'syncDataFromServer') {
+      const { showToast } = await import('src/utils/interactive');
+      showToast({
+        type: 'warning',
+        message: 'Fetching data from server.',
+        duration: 'very_long'
+      });
       await initERPNSync(this.fyo);
       ipc.reloadWindow();
     } else if (ch.changed === 'syncDataToServer') {

src/components/Toast.vue

@@ -42,20 +42,44 @@
             {{ actionText }}
           </button>
         </div>
-        <feather-icon
-          name="x"
-          class="
-            w-4
-            h-4
-            ms-auto
-            text-gray-600
-            dark:text-gray-400
-            cursor-pointer
-            hover:text-gray-800
-            dark:hover:text-gray-200
-          "
-          @click="closeToast"
-        />
+        <div class="ms-auto flex items-center">
+          <svg
+            v-if="isPersistent"
+            class="animate-spin h-4 w-4 text-gray-600 dark:text-gray-400"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+              fill="none"
+            />
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+            />
+          </svg>
+
+          <feather-icon
+            v-else
+            name="x"
+            class="
+              w-4
+              h-4
+              ms-auto
+              text-gray-600
+              dark:text-gray-400
+              cursor-pointer
+              hover:text-gray-800
+              dark:hover:text-gray-200
+            "
+            @click="closeToast"
+          />
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -87,11 +111,16 @@ export default defineComponent({
     config() {
       return getIconConfig(this.type);
     },
+    isPersistent() {
+      return this.duration === 'very_long';
+    },
   },
   async mounted() {
     const duration = toastDurationMap[this.duration];
     await nextTick(() => (this.open = true));
-    setTimeout(this.closeToast, duration);
+    if (duration !== Infinity) {
+      setTimeout(this.closeToast, duration);
+    }
   },
   methods: {
     actionClicked() {

src/utils/ui.ts

@@ -37,7 +37,11 @@ import {
   UIGroupedFields,
 } from './types';
 
-export const toastDurationMap = { short: 2_500, long: 5_000 } as const;
+export const toastDurationMap = {
+  short: 2_500,
+  long: 5_000,
+  very_long: Infinity,
+} as const;
 
 export async function openQuickEdit({
   doc,