databrowser.html: Race condition when loading from CDN #260
Description
Summary
The official databrowser.html has a race condition that causes failures when mashlib is loaded from a CDN (e.g., unpkg.com) rather than served locally.
Problem
Current implementation in src/databrowser.html:
<script>document.addEventListener('DOMContentLoaded', function() {
panes.runDataBrowser()
})</script>
<script defer="defer" src="mashlib.min.js"></script>The defer attribute is supposed to ensure scripts execute after parsing but before DOMContentLoaded. However, with slow CDN loading:
- HTML parsing completes
- Browser starts downloading mashlib from CDN
DOMContentLoadedmay fire before download completes (browser behavior varies)panesis undefined → error or unexpected behavior
Symptoms
When using CDN-hosted mashlib:
- First page load shows blank content or recursive UI nesting
- Hard refresh (Ctrl+Shift+R) works
- Consistent reproduction in fresh/incognito browser sessions
Proposed Fix
Use script.onload pattern for reliable CDN loading:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>SolidOS Web App</title>
<link href="https://unpkg.com/mashlib@2.0.0/dist/mash.css" rel="stylesheet">
</head>
<body id="PageBody">
<header id="PageHeader"></header>
<div class="TabulatorOutline" id="DummyUUID" role="main">
<table id="outline"></table>
<div id="GlobalDashboard"></div>
</div>
<footer id="PageFooter"></footer>
<script>
(function() {
var s = document.createElement('script');
s.src = 'https://unpkg.com/mashlib@2.0.0/dist/mashlib.min.js';
s.onload = function() { panes.runDataBrowser(); };
s.onerror = function() {
document.body.innerHTML = '<p>Failed to load Mashlib</p>';
};
document.head.appendChild(s);
})();
</script>
</body>
</html>This guarantees panes.runDataBrowser() only executes after mashlib.min.js is fully loaded and executed.
Why This Matters
- CDN usage is common - Many developers want to quickly test/prototype without bundling
- unpkg.com recommendation - The README suggests using unpkg for quick starts
- Standard pattern -
script.onloadis how Google Analytics, Facebook SDK, and other CDN-loaded libraries handle this
Options
- Update databrowser.html to use
script.onloadpattern (works for both local and CDN) - Provide separate CDN example in documentation
- Document the limitation that
deferassumes local/fast loading
Context
Discovered while implementing mashlib support in JavaScriptSolidServer. We implemented a fix there: JavaScriptSolidServer/JavaScriptSolidServer#8
Happy to submit a PR if the maintainers prefer option 1.