experiments in a post-browser web
feat(page): add loading glow animation for immediate visual feedback during page load
+29
-2
+22
-1
app/page/index.html
+22
-1
app/page/index.html
···
45
45
overflow: hidden;
46
46
-webkit-mask-image: -webkit-radial-gradient(white, white);
47
47
opacity: 0;
48
-
transition: opacity 0.15s ease;
48
+
transition: opacity 0.15s ease, box-shadow 0.3s ease;
49
+
}
50
+
51
+
@keyframes loading-glow {
52
+
0%, 100% {
53
+
box-shadow:
54
+
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
55
+
0 0 8px rgba(120, 160, 255, 0.05);
56
+
}
57
+
50% {
58
+
box-shadow:
59
+
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
60
+
0 0 15px rgba(120, 160, 255, 0.12);
61
+
}
62
+
}
63
+
64
+
webview.loading {
65
+
opacity: 1;
66
+
background: rgba(255, 255, 255, 0.02);
67
+
animation: loading-glow 2s ease-in-out infinite;
49
68
}
50
69
51
70
webview.ready {
52
71
opacity: 1;
72
+
box-shadow: none;
73
+
background: initial;
53
74
}
54
75
55
76
/*
+7
-1
app/page/page.js
+7
-1
app/page/page.js
···
303
303
}
304
304
305
305
initWebview();
306
+
webview.classList.add('loading');
307
+
show({ source: 'loading' });
306
308
307
309
// --- Custom drag ---
308
310
// Two modes:
···
771
773
function scheduleHide() {
772
774
if (hideTimer) clearTimeout(hideTimer);
773
775
hideTimer = setTimeout(() => {
774
-
if (showSource !== 'hover') return;
776
+
if (showSource !== 'hover' && showSource !== 'loading') return;
775
777
// If cursor is still in the navbar+trigger area, don't hide.
776
778
// This prevents the hide→contract→re-trigger→show bounce when cursor
777
779
// crosses the boundary between navbar and webview.
···
1007
1009
1008
1010
// Fade in the webview now that background is matched
1009
1011
webview.classList.add('ready');
1012
+
webview.classList.remove('loading');
1013
+
if (showSource === 'loading') {
1014
+
scheduleHide();
1015
+
}
1010
1016
});
1011
1017
1012
1018
// Note: we do NOT remove .ready on did-start-loading — keeping the webview