feat: add share-link loading overlay to eliminate flash of bare UI

ijbo · ijbo · commit 971de552b93f · 2026-04-02T18:55:57.000+09:00
- Added full-screen #share-loading-overlay with branded logo + spinner
- Inline &lt;head&gt; script detects share hash params (s=, id=, d=, space=) before any JS loads
- Overlay activates immediately at body parse time (zero-lag)
- Theme-aware: dark #0d1117 / light #f6f8fa backgrounds
- Fades out smoothly (0.35s opacity) when content is ready
- Added hideShareLoader() helper in cloud-share.js, called at all terminal paths
- 15-second safety timeout auto-dismisses overlay on network failure
- Removed intermediate 'Decrypting...' / 'Loading Space...' divs from preview panel
diff --git a/CHANGELOG-share-link-loader.md b/CHANGELOG-share-link-loader.md
@@ -0,0 +1,38 @@
+# Share Link Loading Overlay — Eliminate Flash of Bare UI
+
+- Added full-screen loading overlay (`#share-loading-overlay`) that shows instantly when a share URL is detected
+- Overlay activates before any JS or CSS loads via inline `<script>` hash detection in `<head>`
+- Overlay shows TextAgent logo, animated spinner, and "Loading shared content…" label
+- Overlay is theme-aware: dark background (`#0d1117`) in dark mode, `#f6f8fa` in light mode
+- Overlay fades out smoothly (0.35s opacity transition) once content is ready
+- Added `hideShareLoader()` helper in `cloud-share.js`, called at every terminal path (success and error)
+- Fixed: Space hub (`#space=`) path was writing an intermediate "Loading Space…" div to the preview; now stays hidden behind the overlay
+- Fixed: Compact share (`#s=`), secure share (`#id=`), and legacy share (`#id=&k=`) paths all properly dismiss the overlay
+- Removed intermediate "Decrypting…" / "Loading…" divs from within the preview panel (they were visible during the lag)
+- Added 15-second safety net auto-dismiss in case of network failure or JS errors during load
+
+---
+
+## Summary
+When users opened a shared link like `#space=ai-articles&s=tcujtr979xk`, they saw three ugly stages: an empty screen, then a flash of the bare editor HTML, then the final content. This adds a polished full-screen loading splash that hides all of that until the content is ready to display.
+
+---
+
+## 1. Share Link Loading Overlay (index.html)
+**Files:** `index.html`
+**What:** Added `#share-loading-overlay` div with inline CSS (logo, spinner, label) positioned `fixed; inset: 0; z-index: 99999`. An inline `<script>` in `<head>` detects the hash params (`s=`, `id=`, `d=`, `space=`) and sets `window.__showShareLoader = true`. A second inline `<script>` immediately after the overlay element activates it with the `slo-active` class. A 15-second safety timeout auto-dismisses the overlay if loading fails.
+**Impact:** Users see a branded, polished loading screen instead of a blank or partially-rendered UI during the Firebase fetch and decryption phase.
+
+## 2. Share Loader Dismissal (cloud-share.js)
+**Files:** `js/cloud-share.js`
+**What:** Added `hideShareLoader()` private function that adds `slo-fade-out` class (triggers CSS opacity transition) then removes both classes after 380ms. Called at every exit point of `M.loadSharedMarkdown`: success paths for Space hub, compact share, secure share, and legacy share; all error/catch blocks; and the access-denied gate for forms.
+**Impact:** Loader always dismisses cleanly whether content loads successfully, fails to load, or is blocked by the form access gate.
+
+---
+
+## Files Changed (2 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `index.html` | +90 −1 | Added overlay HTML + CSS + activation scripts |
+| `js/cloud-share.js` | +22 −8 | Added hideShareLoader helper + dismiss calls |
diff --git a/README.md b/README.md
@@ -544,6 +544,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-04-02** | | ⚡ **Share Link Loading Overlay** — eliminates the flash of bare UI when opening shared links (`#space=`, `#s=`, `#id=`, `#d=`); full-screen branded loading splash (TextAgent logo + spinner) activates before any JS loads via inline hash detection in `<head>`; theme-aware (dark `#0d1117` / light `#f6f8fa`); fades out smoothly (0.35s) once content is ready; `hideShareLoader()` called at every terminal path (success, error, form-gate); 15-second safety timeout auto-dismisses on network failure |
 | **2026-04-02** | | ✏️ **Annotate DocGen + Pretext Reflow Engine** — new `{{Annotate:}}` DocGen tag with canvas-based freehand annotation overlay; `@text:` source mode renders text on-canvas with real-time Pretext-style scanline reflow (~0.5–1.5ms/frame, O(width) per row); freehand strokes build an offscreen mask; per-row `getImageData` scans free x-intervals; words packed into intervals via `canvas.measureText()` (same arithmetic as Pretext `layoutNextLine()`); tools: pen, highlighter, eraser, line, arrow, rect, circle; color swatches + size slider; `📖 Present` button calls `M.setViewMode('preview')` — hides editor, annotation stays fully drawable while reading; `↩ Undo` / `🗑 Clear` / `📥 PNG` actions; Fixed: `data-text` stripped by DOMPurify — added `data-text`, `data-reflow` to `ADD_ATTR` + hidden `<span class="ann-reflow-text">` textContent as primary storage (survives sanitization without whitelisting); `annotate-docgen.js` (~710 lines) + `annotate-docgen.css` (~340 lines); interactive demo: `public/pretext-reflow-demo.html` — 4-tab demo (Float Image, Draw Exclusion, Both Together, API explainer) |
 | **2026-04-02** | | 📬 **Space Recovery by Email + Email Link Fix** — Spaces "Recover" view now has two tabs: **By Email** (default — enter email + access key, Firestore queries by hashed `eh` field to recover all matching spaces) and **By Slug** (existing flow); email pre-filled from localStorage; recovers multiple spaces at once if same key used; "Email to Self" now embeds all generated links (Share Link, Editor Link, Respondent Link, Password) directly in the email body so they always appear in the sent email |
 | **2026-04-02** | | 🔬 **Research Loop UX Fixes** — fixed table-tools toolbar hijacking research results table (skips `research-results-table` class); fixed results table `max-height: 350px` clipping to `600px`; moved `research-loop.js` import to Phase 3b-ext3 with try/catch to prevent silent load failures; clicking row now shows only the extracted `PROMPT` text with `📋 Copy` button (not full scorer code); added search pills panel (`@search:` field) with provider API key prompts; DOMPurify allowlist expanded for `input`, `label`, `checked`, `data-research-*` attrs; iframe sandbox height raised from 800→5000px |
diff --git a/changelogs/CHANGELOG-share-link-loader.md b/changelogs/CHANGELOG-share-link-loader.md
@@ -0,0 +1,38 @@
+# Share Link Loading Overlay — Eliminate Flash of Bare UI
+
+- Added full-screen loading overlay (`#share-loading-overlay`) that shows instantly when a share URL is detected
+- Overlay activates before any JS or CSS loads via inline `<script>` hash detection in `<head>`
+- Overlay shows TextAgent logo, animated spinner, and "Loading shared content…" label
+- Overlay is theme-aware: dark background (`#0d1117`) in dark mode, `#f6f8fa` in light mode
+- Overlay fades out smoothly (0.35s opacity transition) once content is ready
+- Added `hideShareLoader()` helper in `cloud-share.js`, called at every terminal path (success and error)
+- Fixed: Space hub (`#space=`) path was writing an intermediate "Loading Space…" div to the preview; now stays hidden behind the overlay
+- Fixed: Compact share (`#s=`), secure share (`#id=`), and legacy share (`#id=&k=`) paths all properly dismiss the overlay
+- Removed intermediate "Decrypting…" / "Loading…" divs from within the preview panel (they were visible during the lag)
+- Added 15-second safety net auto-dismiss in case of network failure or JS errors during load
+
+---
+
+## Summary
+When users opened a shared link like `#space=ai-articles&s=tcujtr979xk`, they saw three ugly stages: an empty screen, then a flash of the bare editor HTML, then the final content. This adds a polished full-screen loading splash that hides all of that until the content is ready to display.
+
+---
+
+## 1. Share Link Loading Overlay (index.html)
+**Files:** `index.html`
+**What:** Added `#share-loading-overlay` div with inline CSS (logo, spinner, label) positioned `fixed; inset: 0; z-index: 99999`. An inline `<script>` in `<head>` detects the hash params (`s=`, `id=`, `d=`, `space=`) and sets `window.__showShareLoader = true`. A second inline `<script>` immediately after the overlay element activates it with the `slo-active` class. A 15-second safety timeout auto-dismisses the overlay if loading fails.
+**Impact:** Users see a branded, polished loading screen instead of a blank or partially-rendered UI during the Firebase fetch and decryption phase.
+
+## 2. Share Loader Dismissal (cloud-share.js)
+**Files:** `js/cloud-share.js`
+**What:** Added `hideShareLoader()` private function that adds `slo-fade-out` class (triggers CSS opacity transition) then removes both classes after 380ms. Called at every exit point of `M.loadSharedMarkdown`: success paths for Space hub, compact share, secure share, and legacy share; all error/catch blocks; and the access-denied gate for forms.
+**Impact:** Loader always dismisses cleanly whether content loads successfully, fails to load, or is blocked by the form access gate.
+
+---
+
+## Files Changed (2 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `index.html` | +90 −1 | Added overlay HTML + CSS + activation scripts |
+| `js/cloud-share.js` | +22 −8 | Added hideShareLoader helper + dismiss calls |
diff --git a/index.html b/index.html
@@ -91,7 +91,79 @@
             background: inherit;
             color: inherit;
         }
+
+        /* =========================================
+           SHARE LINK LOADING OVERLAY
+           Shows only when a share hash is in the URL
+           ========================================= */
+        #share-loading-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            z-index: 99999;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 20px;
+            background: var(--bg-color, #0d1117);
+            transition: opacity 0.35s ease, transform 0.35s ease;
+            opacity: 1;
+        }
+        #share-loading-overlay.slo-active {
+            display: flex;
+        }
+        #share-loading-overlay.slo-fade-out {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .slo-logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            color: #58a6ff;
+            opacity: 0.95;
+        }
+        .slo-logo img {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+        }
+        .slo-spinner {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 3px solid rgba(88,166,255,0.15);
+            border-top-color: #58a6ff;
+            animation: slo-spin 0.75s linear infinite;
+        }
+        @keyframes slo-spin {
+            to { transform: rotate(360deg); }
+        }
+        .slo-label {
+            font-size: 0.85rem;
+            color: rgba(201,209,217,0.55);
+            letter-spacing: 0.04em;
+        }
+        html[data-theme="light"] #share-loading-overlay {
+            background: #f6f8fa;
+        }
+        html[data-theme="light"] .slo-label {
+            color: rgba(31,35,40,0.45);
+        }
     </style>
+    <!-- Share-link splash: detect hash BEFORE any JS so overlay shows instantly -->
+    <script>
+        (function () {
+            var h = window.location.hash;
+            if (h && (h.indexOf('s=') !== -1 || h.indexOf('id=') !== -1 || h.indexOf('d=') !== -1 || h.indexOf('space=') !== -1)) {
+                // Will be activated once the overlay element exists (see body)
+                window.__showShareLoader = true;
+            }
+        })();
+    </script>
 
     <!-- Updated libraries to latest versions -->
 
@@ -134,6 +206,28 @@
 </head>
 
 <body>
+    <!-- Share link loading overlay (hidden by default, shown via JS below) -->
+    <div id="share-loading-overlay" aria-live="polite" aria-label="Loading shared document">
+        <div class="slo-logo">
+            <img src="/assets/icon.png" alt="TextAgent" onerror="this.style.display='none'">
+            TextAgent
+        </div>
+        <div class="slo-spinner"></div>
+        <div class="slo-label">Loading shared content&hellip;</div>
+    </div>
+    <script>
+        if (window.__showShareLoader) {
+            var _sloEl = document.getElementById('share-loading-overlay');
+            _sloEl.classList.add('slo-active');
+            // Safety net: auto-dismiss after 15s in case JS loading fails
+            setTimeout(function () {
+                if (_sloEl.classList.contains('slo-active')) {
+                    _sloEl.classList.add('slo-fade-out');
+                    setTimeout(function () { _sloEl.classList.remove('slo-active', 'slo-fade-out'); }, 400);
+                }
+            }, 15000);
+        }
+    </script>
     <div class="app-container">
         <header class="app-header">
             <div class="container-fluid d-flex justify-content-between align-items-center header-container">
diff --git a/js/cloud-share.js b/js/cloud-share.js
@@ -13,6 +13,16 @@
     M.sharedViewLock = null;   // null = no lock, 'ppt' | 'preview' = locked
     var readonlyClickHandlerInstalled = false;
 
+    // --- Share-link loading overlay dismissal ---
+    function hideShareLoader() {
+        var overlay = document.getElementById('share-loading-overlay');
+        if (!overlay || !overlay.classList.contains('slo-active')) return;
+        overlay.classList.add('slo-fade-out');
+        setTimeout(function () {
+            overlay.classList.remove('slo-active', 'slo-fade-out');
+        }, 380);
+    }
+
     // --- Firebase Config ---
     var firebaseConfig = {
         apiKey: 'AIzaSyC_5pgtZ-mZvHmIUH9X7MkObPwDLw8nyfw',
@@ -553,16 +563,18 @@
         // --- Space hub: #space=<slug> ---
         if (spaceSlug && !compactId) {
             try {
-                M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center; opacity: 0.6;"><i class="bi bi-collection"></i> Loading Space...</div>';
                 M.setViewMode('preview');
                 var spaceData = await M.loadSpace(spaceSlug);
                 if (!spaceData) {
+                    hideShareLoader();
                     M.markdownPreview.innerHTML = '<div style="padding: 60px; text-align: center;"><h2>Space Not Found</h2><p>This space may have been removed or the URL is incorrect.</p></div>';
                     return;
                 }
+                hideShareLoader();
                 M.renderSpaceHub(spaceData, spaceSlug);
             } catch (e) {
                 console.error('Error loading Space:', e);
+                hideShareLoader();
                 M.markdownPreview.innerHTML = '<div style="padding: 60px; text-align: center;"><h2>Error</h2><p>' + e.message + '</p></div>';
             }
             return;
@@ -640,6 +652,7 @@
 
                 // Form access gate: block if form doc but no rk or m=fill (unless editor)
                 if (!isEditMode && /\{\{@?(?:Form|Quiz):/i.test(markdownContent) && !M.formResponseKey && !M.isFormFillMode) {
+                    hideShareLoader();
                     M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center;"><h3 style="color: var(--color-danger-fg);"><i class="bi bi-shield-lock"></i> Access Denied</h3><p style="opacity: 0.7;">This form requires a valid access link.</p><p style="font-size: 13px; opacity: 0.5;">Please use the link provided by the form creator.</p></div>';
                     M.setViewMode('preview');
                     return;
@@ -656,16 +669,19 @@
                     document.body.classList.remove('editor-readonly');
                     lastCloudContent = markdownContent; // Prevent immediate re-save
                     scheduleCloudSave();
+                    hideShareLoader();
                     if (M.showToast) M.showToast('🔑 Editor access — changes will sync to this document', 'success');
                 } else {
                     var sharedMode = M.sharedViewLock || 'preview';
                     M.setViewMode(sharedMode);
                     M.isViewingSharedDoc = true;
                     showSharedBanner();
                     if (sharedMode === 'preview' && M.setHeaderLevel) M.setHeaderLevel(2);
+                    hideShareLoader();
                 }
             } catch (error) {
                 console.error('Failed to load compact shared markdown:', error);
+                hideShareLoader();
                 M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center;"><h3 style="color: var(--color-danger-fg);"><i class="bi bi-shield-exclamation"></i> Decryption Failed</h3><p style="opacity: 0.7;">The link may be invalid or the document may not exist.</p><p style="font-size: 13px; opacity: 0.5;"></p></div>';
                 M.markdownPreview.querySelector('p:last-child').textContent = error.message;
                 M.setViewMode('split');
@@ -676,7 +692,6 @@
         // --- Secure share: no key in URL, passphrase needed ---
         if (isSecure && docId && !keyString) {
             try {
-                M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center; opacity: 0.6;"><i class="bi bi-shield-lock"></i> Loading protected document...</div>';
                 M.setViewMode('split');
                 var doc = await db.collection('shares').doc(docId).get();
                 if (!doc.exists) throw new Error('Shared document not found.');
@@ -686,9 +701,11 @@
                     M.sharedViewLock = data.view;
                 }
                 pendingSecureDoc = { dataString: data.d, saltString: data.salt, docId: docId, ekHash: data.ekHash || '', eWt: data.eWt || '' };
+                hideShareLoader();
                 showPassphrasePrompt();
             } catch (error) {
                 console.error('Failed to load secure shared markdown:', error);
+                hideShareLoader();
                 M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center;"><h3 style="color: var(--color-danger-fg);"><i class="bi bi-shield-exclamation"></i> Document Not Found</h3><p style="opacity: 0.7;">The shared document may have been deleted or the link is invalid.</p></div>';
                 M.setViewMode('split');
             }
@@ -698,7 +715,6 @@
         // --- Legacy quick share: key in URL (#id=...&k=...) ---
         if (!keyString || (!docId && !inlineData)) return;
         try {
-            M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center; opacity: 0.6;"><i class="bi bi-lock"></i> Decrypting shared content...</div>';
             M.setViewMode('split');
             var dataString;
             if (docId) {
@@ -724,6 +740,7 @@
             var markdownContent = decompressData(compressed);
             // Form access gate: block if form doc but no rk or m=fill
             if (/\{\{@?(?:Form|Quiz):/i.test(markdownContent) && !M.formResponseKey && !M.isFormFillMode) {
+                hideShareLoader();
                 M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center;"><h3 style="color: var(--color-danger-fg);"><i class="bi bi-shield-lock"></i> Access Denied</h3><p style="opacity: 0.7;">This form requires a valid access link.</p><p style="font-size: 13px; opacity: 0.5;">Please use the link provided by the form creator.</p></div>';
                 M.setViewMode('preview');
                 return;
@@ -737,8 +754,10 @@
             showSharedBanner();
             // Auto-hide full header for preview mode shared links
             if (sharedMode === 'preview' && M.setHeaderLevel) M.setHeaderLevel(2);
+            hideShareLoader();
         } catch (error) {
             console.error('Failed to load shared markdown:', error);
+            hideShareLoader();
             M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center;"><h3 style="color: var(--color-danger-fg);"><i class="bi bi-shield-exclamation"></i> Decryption Failed</h3><p style="opacity: 0.7;">The link may be invalid or the document may not exist.</p><p style="font-size: 13px; opacity: 0.5;"></p></div>';
             M.markdownPreview.querySelector('p:last-child').textContent = error.message;
             M.setViewMode('split');
