Make live demos in the example webpages click-to-load to limit resource usage #2150
Description
Some of the examples over on https://bevyengine.org/examples/ use quite a lot of system resources when rendering live in the browser. Sometimes I just want to read the text and code on the page, but I can hear my fans start spinning up.
I think it'd be nice if the embedded examples were behind a button action labeled 'click to load live demo', I think this would have several benefits:
- Save on bandwidth as the Wasm binaries are quite large. Especially useful for users with a slow internet connection or expensive data plans.
- Reduce jank when scrolling through the page. I Noticed on mobile Firefox that some examples overwhelm the browser or its process for that page, making rendering of the entire page janky: text doesn't pop in on time after scrolling.
- Preserve battery life on mobile devices and laptops, especially when the tab is open for a longer period of time, like when someone's keeping the example code open next to their editor as a reference.
- Allow keyboard input to browser after page load without having to click out of the embedded example, since they capture the keyboard on load.
On a positive note, it does look like the examples stop running (or rather, run very slowly, like a single frame every so often? some examples have bouncing entities clumping up together when you switch tabs and back again which implies they're still running, just with very very long timesteps) when you switch tabs, so even with many examples open in different tabs, only the visible ones will use resources. I wonder if that's decided by the browser or intentional design for the site, but either way it's quite nice