An eagerly-loaded page loader screen was added to cover the Reveal.js loading artifacts during page load while using slow connections.
All the CSS resources are separate from the main stylesheet to allow for prioritized synchronous loading.
After Reveal.js initialize()
call completes, the screen fades out with a 1s transition after which it gets removed completely. Only the stylesheet link is left loaded to prevent unnecessary repainting.
As a quick way to style the loader a safe check to localStorage was added. You just need to add debug-loader
as true
in the application tab of the browser dev tools (or execute localStorage.setItem('debug-loader', 'true'); location.reload()
from the JS console of the loaded presentation) and the loader won't be removed automatically anymore.