| 406 | } |
| 407 | |
| 408 | function ensurePreviewLoader(overlay) { |
| 409 | const stage = overlay.querySelector('.media-stage'); |
| 410 | if (!stage) return null; |
| 411 | let loader = stage.querySelector('.preview-loading'); |
| 412 | if (loader) return loader; |
| 413 | |
| 414 | loader = document.createElement('div'); |
| 415 | loader.className = 'preview-loading'; |
| 416 | Object.assign(loader.style, { |
| 417 | position: 'absolute', |
| 418 | inset: '0', |
| 419 | display: 'none', |
| 420 | alignItems: 'center', |
| 421 | justifyContent: 'center', |
| 422 | gap: '10px', |
| 423 | fontSize: '13px', |
| 424 | color: 'inherit', |
| 425 | background: 'rgba(0,0,0,0.05)', |
| 426 | backdropFilter: 'blur(1px)', |
| 427 | pointerEvents: 'none', |
| 428 | zIndex: '1000' |
| 429 | }); |
| 430 | loader.innerHTML = ` |
| 431 | <span class="material-icons preview-loading-icon spinning" style="font-size:18px;">autorenew</span> |
| 432 | <span class="preview-loading-text"></span> |
| 433 | `; |
| 434 | stage.appendChild(loader); |
| 435 | return loader; |
| 436 | } |
| 437 | |
| 438 | function setPreviewLoading(overlay, on, message, tone = '') { |
| 439 | const loader = ensurePreviewLoader(overlay); |