Stabilize email card expansion loading
This commit is contained in:
@@ -1820,11 +1820,18 @@ function _prefetchAdjacentEmails(card, count = 3) {
|
||||
|
||||
async function _toggleCardPreview(card, em) {
|
||||
const grid = card.closest('.doclib-grid');
|
||||
const gridRect = grid?.getBoundingClientRect?.();
|
||||
const currentRect = card.getBoundingClientRect();
|
||||
const stableOpenHeight = Math.max(
|
||||
currentRect.height || 0,
|
||||
Math.min(Math.max(260, window.innerHeight * 0.56), gridRect?.height || window.innerHeight)
|
||||
);
|
||||
|
||||
// Already expanded — collapse
|
||||
if (card.classList.contains('email-card-expanded')) {
|
||||
card.classList.remove('email-card-expanded');
|
||||
card.classList.remove('doclib-card-expanded');
|
||||
card.style.minHeight = '';
|
||||
document.getElementById('email-lib-modal')?.classList.remove('email-reading');
|
||||
const reader = card.querySelector('.email-card-reader');
|
||||
if (reader) reader.remove();
|
||||
@@ -1836,6 +1843,7 @@ async function _toggleCardPreview(card, em) {
|
||||
grid.querySelectorAll('.email-card-expanded').forEach(c => {
|
||||
c.classList.remove('email-card-expanded');
|
||||
c.classList.remove('doclib-card-expanded');
|
||||
c.style.minHeight = '';
|
||||
const r = c.querySelector('.email-card-reader');
|
||||
if (r) r.remove();
|
||||
});
|
||||
@@ -1843,6 +1851,7 @@ async function _toggleCardPreview(card, em) {
|
||||
|
||||
card.classList.add('email-card-expanded');
|
||||
card.classList.add('doclib-card-expanded');
|
||||
card.style.minHeight = `${Math.round(stableOpenHeight)}px`;
|
||||
if (!em.is_read) {
|
||||
_syncEmailReadState(em.uid, true);
|
||||
fetch(`${API_BASE}/api/email/mark-read/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' })
|
||||
@@ -1855,7 +1864,8 @@ async function _toggleCardPreview(card, em) {
|
||||
|
||||
// Show loading reader with whirlpool spinner
|
||||
const reader = document.createElement('div');
|
||||
reader.className = 'email-card-reader';
|
||||
reader.className = 'email-card-reader email-card-reader-loading';
|
||||
reader.style.minHeight = `${Math.max(180, Math.round(stableOpenHeight - 70))}px`;
|
||||
const loadingWrap = document.createElement('div');
|
||||
loadingWrap.style.cssText = 'padding:20px;display:flex;justify-content:center;align-items:center;flex:1;';
|
||||
const sp = spinnerModule.createWhirlpool(28);
|
||||
@@ -1935,6 +1945,8 @@ async function _toggleCardPreview(card, em) {
|
||||
${attsHtml}
|
||||
<div class="email-reader-body${data.body_html ? ' html-body' : ''}">${_renderEmailBody(data)}</div>
|
||||
`;
|
||||
reader.classList.remove('email-card-reader-loading');
|
||||
reader.style.minHeight = '';
|
||||
|
||||
// Attachment header click toggles fold/unfold (same UX as the summary).
|
||||
const attsWrap = reader.querySelector('.email-reader-atts-wrap');
|
||||
|
||||
Reference in New Issue
Block a user