experiments in a post-browser web
fix: ensure page loading glow clears when page finishes loading
+12
-12
+12
-12
app/page/page.js
+12
-12
app/page/page.js
···
1008
1008
console.error('[page] Load failed:', e.errorCode, e.errorDescription);
1009
1009
});
1010
1010
1011
-
// Detect page background color, set it as backing color on the webview element,
1012
-
// then fade the webview in. This prevents the white flash when loading pages in dark mode.
1011
+
// On dom-ready: clear loading glow immediately, then detect page background color.
1012
+
// Background detection prevents the white flash when loading pages in dark mode.
1013
1013
webview.addEventListener('dom-ready', async () => {
1014
-
// Always end loading state — even if background detection fails
1015
-
const endLoading = () => {
1016
-
webview.classList.add('ready');
1017
-
webview.classList.remove('loading');
1018
-
if (showSource === 'loading') {
1019
-
scheduleHide();
1020
-
}
1021
-
};
1014
+
// End loading state IMMEDIATELY — don't wait for async bg detection.
1015
+
// This MUST be synchronous at the top of dom-ready so the glow always
1016
+
// clears promptly, even if executeJavaScript hangs or never resolves.
1017
+
webview.classList.add('ready');
1018
+
webview.classList.remove('loading');
1019
+
if (showSource === 'loading') {
1020
+
scheduleHide();
1021
+
}
1022
+
DEBUG && console.log('[page] dom-ready: loading glow cleared');
1022
1023
1024
+
// Detect background color (cosmetic — must not block loading state)
1023
1025
try {
1024
1026
const bgResult = await webview.executeJavaScript(`
1025
1027
(function() {
···
1066
1068
} catch (err) {
1067
1069
console.error('[page] Failed to detect background:', err);
1068
1070
}
1069
-
1070
-
endLoading();
1071
1071
});
1072
1072
1073
1073
// Re-add loading glow on new navigations (but keep webview visible — don't reset opacity)