Fetch mailbox usage in the background to not delay mailbox listing

dashboard/src/views/EmailMailboxesView.vue

@@ -146,17 +146,31 @@ async function onSubmitRemove() {
   removeBusy.value = false;
 }
 
-async function refresh() {
-  let tmp = [];
+async function refreshUsage() {
   async function refreshForDomain(domain) {
-    let [error, result] = await mailModel.usage(domain);
+    const [error, usage] = await mailModel.usage(domain);
     // retry if mail addon cannot be reached during restarts
     if (error && error.status === 424) return setTimeout(refresh, 2000);
     else if (error) return console.error(error);
 
-    const usage = result;
+    mailboxes.value.forEach((m) => {
+      if (usage[m.fullName]) m.usage = usage[m.fullName];
+    });
+  }
 
-    [error, result] = await mailboxesModel.list(domain);
+  try {
+    await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
+  } catch (error) {
+    return console.error(error);
+  }
+
+  mailboxesUsage.value = mailboxes.value.reduce((acc, m) => acc + (m.usage && m.usage.diskSize), 0);
+}
+
+async function refresh() {
+  let tmp = [];
+  async function refreshForDomain(domain) {
+    const [error, result] = await mailboxesModel.list(domain);
     if (error) throw error;
 
     result.forEach((m) => {
@@ -166,7 +180,7 @@ async function refresh() {
       if (!m.owner) m.owner = groups.value.find(g => g.id === m.ownerId) || null;
 
       m.ownerDisplayName = m.owner ? (m.owner.username || m.owner.name) : '';
-      m.usage = usage[m.fullName] || 0;
+      m.usage = -1;
     });
 
     tmp = tmp.concat(result);
@@ -179,7 +193,6 @@ async function refresh() {
   }
 
   mailboxes.value = tmp;
-  mailboxesUsage.value = mailboxes.value.reduce((acc, m) => acc + (m.usage && m.usage.diskSize), 0);
 }
 
 onMounted(async () => {
@@ -203,6 +216,9 @@ onMounted(async () => {
 
   await refresh();
 
+  // we do this in the background to show the list faster
+  refreshUsage();
+
   busy.value = false;
 });
 
@@ -244,7 +260,7 @@ onMounted(async () => {
       <TableView :columns="columns" :model="filteredMailboxes" :busy="busy" :placeholder="$t(searchFilter ? 'email.incoming.mailboxes.noMatchesPlaceholder' : 'email.incoming.mailboxes.emptyPlaceholder')">
         <template #aliases="mailbox">{{ renderAliases(mailbox.aliases) }}</template>
         <template #usage="mailbox">
-          <span v-if="mailbox.usage || mailbox.usage === 0">{{ prettyDecimalSize(mailbox.usage.diskSize)  }}</span>
+          <span v-if="mailbox.usage !== -1">{{ prettyDecimalSize(mailbox.usage.diskSize) }}</span>
           <span v-else>{{ $t('main.loadingPlaceholder') }} ...</span>
         </template>
         <template #storageQuota="mailbox">