Show email delete overlay before request

This commit is contained in:
pewdiepie-archdaemon
2026-06-28 22:41:09 +00:00
parent 1e78ac999d
commit 240768a7a1
3 changed files with 22 additions and 3 deletions
+3
View File
@@ -1185,6 +1185,7 @@ async function _deleteEmail(em) {
if (!ok) return; if (!ok) return;
const row = document.querySelector(`.email-item[data-uid="${CSS.escape(String(em.uid))}"]`); const row = document.querySelector(`.email-item[data-uid="${CSS.escape(String(em.uid))}"]`);
const busy = _showEmailDeleteOverlay(row); const busy = _showEmailDeleteOverlay(row);
await busy?.ready;
try { try {
await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(_currentFolder)}${_acct()}`, { method: 'DELETE' }); await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(_currentFolder)}${_acct()}`, { method: 'DELETE' });
busy?.remove?.(); busy?.remove?.();
@@ -1208,7 +1209,9 @@ function _showEmailDeleteOverlay(target) {
target.style.pointerEvents = 'none'; target.style.pointerEvents = 'none';
target.classList.add('email-delete-busy'); target.classList.add('email-delete-busy');
target.appendChild(overlay); target.appendChild(overlay);
const ready = new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
return { return {
ready,
remove() { remove() {
try { wp.destroy?.(); } catch (_) {} try { wp.destroy?.(); } catch (_) {}
overlay.remove(); overlay.remove();
+16 -1
View File
@@ -722,6 +722,7 @@ async function _deleteEmailAndAdvance(em, card, opts = {}) {
if (!ok) return; if (!ok) return;
} }
const busy = _showEmailDeleteOverlay(card); const busy = _showEmailDeleteOverlay(card);
await busy?.ready;
const wasExpanded = !!card?.classList?.contains('doclib-card-expanded'); const wasExpanded = !!card?.classList?.contains('doclib-card-expanded');
const sibling = wasExpanded const sibling = wasExpanded
? (_findSiblingEmailCard(card, +1) || _findSiblingEmailCard(card, -1)) ? (_findSiblingEmailCard(card, +1) || _findSiblingEmailCard(card, -1))
@@ -767,7 +768,9 @@ function _showEmailDeleteOverlay(target) {
target.style.pointerEvents = 'none'; target.style.pointerEvents = 'none';
target.classList.add('email-delete-busy'); target.classList.add('email-delete-busy');
target.appendChild(overlay); target.appendChild(overlay);
const ready = new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
return { return {
ready,
remove() { remove() {
try { wp.destroy?.(); } catch (_) {} try { wp.destroy?.(); } catch (_) {}
overlay.remove(); overlay.remove();
@@ -6582,6 +6585,7 @@ function _showReaderMoreMenu(em, card, reader, anchor) {
icon: _trashIcon, icon: _trashIcon,
action: async () => { action: async () => {
const busy = _showEmailDeleteOverlay(card); const busy = _showEmailDeleteOverlay(card);
await busy?.ready;
try { try {
await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' }); await fetch(`${API_BASE}/api/email/delete/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
} catch (e) { } catch (e) {
@@ -6606,6 +6610,7 @@ function _showReaderMoreMenu(em, card, reader, anchor) {
); );
if (!ok) return; if (!ok) return;
const busy = _showEmailDeleteOverlay(card); const busy = _showEmailDeleteOverlay(card);
await busy?.ready;
try { try {
await fetch(`${API_BASE}/api/email/delete-permanent/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' }); await fetch(`${API_BASE}/api/email/delete-permanent/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
} catch (e) { } catch (e) {
@@ -6819,7 +6824,17 @@ function _showCardMenu(em, anchor) {
const subject = em.subject || '(no subject)'; const subject = em.subject || '(no subject)';
const ok = await styledConfirm(`Delete "${subject}"?`, { confirmText: 'Delete', cancelText: 'Cancel', danger: true }); const ok = await styledConfirm(`Delete "${subject}"?`, { confirmText: 'Delete', cancelText: 'Cancel', danger: true });
if (!ok) return; 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]); await _animateEmailCardRemoval([em.uid]);
state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid)); state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid));
_renderGrid(); _renderGrid();
+3 -2
View File
@@ -29296,8 +29296,9 @@ button .spinner-whirlpool {
0 0 12px -3px color-mix(in srgb, var(--accent, var(--red)) 65%, transparent); 0 0 12px -3px color-mix(in srgb, var(--accent, var(--red)) 65%, transparent);
} }
.email-delete-busy { .email-delete-busy > :not(.email-delete-overlay) {
opacity: 0.72; opacity: 0.42;
transition: opacity 0.12s ease;
} }
.email-delete-overlay { .email-delete-overlay {