It would be useful if there were CSS classes allowing CSS to style things differently depending on whether the page has finished loading or not, like how .client-js and .client-nojs indicate whether the user has javascript enabled.
Version: 1.19
Severity: enhancement
But... isn't client-js and client-nojs sufficient?
The page has initially .client-nojs. When page has finished loading it changes to .client-js, except if JS is disabled (or an error occurred), because the change is performed using JS.
It would require JS anyway to insert the new CSS class you propose (.loaded), so I don't see why we need yet another CSS class for this.
Unless I'm mistaken, .client-nojs switches to .client-js before the body even starts loading, and thus can not be used to style items based on whether the page is still being loaded or not.
This script could add the desired class, except a "not-loaded" initial class, in case you're interested:
$(function() { $(document.body).addClass('loaded'); });
We can do a lot of things, the question is whether we should. What is the use case for styling things differently once the entire page is loaded.
Maybe you're looking for a too generic solution, is it related to when a specific feature has loaded?
Remember that components can be reloaded without a page reload (for example ajax preview).
The loading gap between when content appears on a page and when relevant scripts run is a very much neglected area, despite it being very noticeable and somewhat disorienting when not taken care of. These days it's the norm for a wiki page to have a very noticeable "jump" as elements are added, moved, styled, etc when the DOMContentLoaded fires. I thought it would be useful to have a simple way to add styles specifically for content in a not-yet-finished page (and also specifically for a finished page, though that's less important). CSS could hide certain elements until they're ready, or where possible slightly fade them and add a "wait" cursor to indicate that they're not clickable yet. Temporary padding or margins could be used to prevent a jump when an extra element is stuffed into the spot. CSS generated content could be used to attach fake show/hide buttons before JS has the chance to add real working ones. Or load icons, for that matter. A portlet links that activates JS could have code like this: .client-nojs #n-foo{display:none;}.client-js.not-loaded #n-foo a{color: #666;cursor: wait;}. All the JS-loaded special pages could look not like a mess while loading. I'm having a bit of difficulty thinking of good examples, but overall I strongly suspect that these classes would be quite useful if available. In theory, lots of stuff could just be done by having CSS that's just undone by JS on load, but that is frequently quite difficult to do.
The rendering impact of JavaScript on initial load has been a focus for me over the past 1-2 years. Including:
And lots of small patches that ether move logic from JS to PHP/HTML, or otherwise avoid FOUC.
I'm declining this general request as it would imho wrongly encourage adoption of anti-patterns that involve changing things during page load. In the few cases where this is actually desired, the component can create its own class name as needed. Vector and MobileFrontend both do this in certain edge cases.