From 240768a7a1450dcfafa500f6feeaed0973e2004b Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sun, 28 Jun 2026 22:41:09 +0000
Subject: [PATCH] Show email delete overlay before request

---
 static/js/emailInbox.js   |  3 +++
 static/js/emailLibrary.js | 17 ++++++++++++++++-
 static/style.css          |  5 +++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/static/js/emailInbox.js b/static/js/emailInbox.js
index 7edb59df4..35eefff61 100644
--- a/static/js/emailInbox.js
+++ b/static/js/emailInbox.js
@@ -1185,6 +1185,7 @@ async function _deleteEmail(em) {
   if (!ok) return;
   const row = document.querySelector(`.email-item[data-uid="${CSS.escape(String(em.uid))}"]`);
   const busy = _showEmailDeleteOverlay(row);
+  await busy?.ready;
   try {
     await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(_currentFolder)}${_acct()}`, { method: 'DELETE' });
     busy?.remove?.();
@@ -1208,7 +1209,9 @@ function _showEmailDeleteOverlay(target) {
   target.style.pointerEvents = 'none';
   target.classList.add('email-delete-busy');
   target.appendChild(overlay);
+  const ready = new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
   return {
+    ready,
     remove() {
       try { wp.destroy?.(); } catch (_) {}
       overlay.remove();
diff --git a/static/js/emailLibrary.js b/static/js/emailLibrary.js
index be61b4f6c..8ad3c39c3 100644
--- a/static/js/emailLibrary.js
+++ b/static/js/emailLibrary.js
@@ -722,6 +722,7 @@ async function _deleteEmailAndAdvance(em, card, opts = {}) {
     if (!ok) return;
   }
   const busy = _showEmailDeleteOverlay(card);
+  await busy?.ready;
   const wasExpanded = !!card?.classList?.contains('doclib-card-expanded');
   const sibling = wasExpanded
     ? (_findSiblingEmailCard(card, +1) || _findSiblingEmailCard(card, -1))
@@ -767,7 +768,9 @@ function _showEmailDeleteOverlay(target) {
   target.style.pointerEvents = 'none';
   target.classList.add('email-delete-busy');
   target.appendChild(overlay);
+  const ready = new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
   return {
+    ready,
     remove() {
       try { wp.destroy?.(); } catch (_) {}
       overlay.remove();
@@ -6582,6 +6585,7 @@ function _showReaderMoreMenu(em, card, reader, anchor) {
       icon: _trashIcon,
       action: async () => {
         const busy = _showEmailDeleteOverlay(card);
+        await busy?.ready;
         try {
           await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
         } catch (e) {
@@ -6606,6 +6610,7 @@ function _showReaderMoreMenu(em, card, reader, anchor) {
         );
         if (!ok) return;
         const busy = _showEmailDeleteOverlay(card);
+        await busy?.ready;
         try {
           await fetch(`${API_BASE}/api/email/delete-permanent/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
         } catch (e) {
@@ -6819,7 +6824,17 @@ function _showCardMenu(em, anchor) {
       const subject = em.subject || '(no subject)';
       const ok = await styledConfirm(`Delete "${subject}"?`, { confirmText: 'Delete', cancelText: 'Cancel', danger: true });
       if (!ok) return;
-      await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
+      const card = document.querySelector(`#email-lib-grid .doclib-card[data-uid="${CSS.escape(String(em.uid))}"]`);
+      const busy = _showEmailDeleteOverlay(card);
+      await busy?.ready;
+      try {
+        await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
+      } catch (e) {
+        busy?.remove?.();
+        showToast('Failed to delete email');
+        throw e;
+      }
+      busy?.remove?.();
       await _animateEmailCardRemoval([em.uid]);
       state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid));
       _renderGrid();
diff --git a/static/style.css b/static/style.css
index b116d8717..20c5a9048 100644
--- a/static/style.css
+++ b/static/style.css
@@ -29296,8 +29296,9 @@ button .spinner-whirlpool {
     0 0 12px -3px color-mix(in srgb, var(--accent, var(--red)) 65%, transparent);
 }
 
-.email-delete-busy {
-  opacity: 0.72;
+.email-delete-busy > :not(.email-delete-overlay) {
+  opacity: 0.42;
+  transition: opacity 0.12s ease;
 }
 
 .email-delete-overlay {