Support hooks for loading indicators and error handling in the generated javascript and html

JWorthe commented 3 years ago

This is difficult to figure out how best to support from a web-bundler perspective.

In my index.html, I've started including the following. In this case, when the webassembly is loaded, Seed will take over the 'app' div.

<body>
    <div id="app"">
        <main>
            <nav>
                <!-- just the static branding part of the navbar. -->
            </nav>
            <div class="container" id="loading-content">
                <noscript>
                    <h1>Error: Your Browser Does Not Support JavaScript</h1>
                    <p class="text-danger">This application requires JavaScript. Please use a web browser that has JavaScript enabled.</p>
                </noscript>
            </div>
        </main>
        <footer>© Panoptix 2021</footer>
    </div>
    <script>
        if (!window.WebAssembly) {
            document.getElementById('loading-content').innerHTML = '<h1>Error: Your Browser Does Not Support WebAssembly</h1><p class="text-danger">This application requires a modern web browser which supports WebAssembly. Please upgrade your web browser to use this application.</p>';
        } else {
            document.getElementById('loading-content').innerHTML = '<h1>Loading</h1><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>';
        }
    </script>

    {{ javascript | safe }}
</body>

The important parts here:

The high level static layout of my page is there right from the beginning.
If the browser doesn't support JavaScript, it tells you about it (with the noscript tag).
If your browser does support JavaScript, but not WebAssembly, we put a warning about it.
If the browser supports all the things, show a loading indicator.

Something that's missing here is that there isn't any error handling if the .wasm file fails to load, since web-bundler doesn't expose the wasm fetching code generated by wasm-pack.

I think each site might do different things with these, but I think the list of error events is the same for all sites. It would be nice if web-bundler exposed them in some unified way.

JWorthe commented 3 years ago

It would also be good to wrap the javascript generated by wasm-pack in an if (window.WebAssembly), since it will fetch and try to initialize the wasm file (which might be big) regardless on if it can actually use it or not.

cecton commented 3 years ago

We should probably move this issue to wasmbl

panoptix-za / web-bundler

Support hooks for loading indicators and error handling in the generated javascript and html #7