Add html class after all assets are loaded for a page

[swashbuck]

Subject of the enhancement

To help with the timing of CSS animations, it would be useful to have an html class that indicates when all assets have been loaded for a page.

Use case

I want to animate the title element as soon as the page is loaded and the loading screen is removed. There is currently not a way to know when the loading screen is removed, so it's difficult to know when the animation should be triggered. For instance, there is a chance that the animation is triggered while the loading screen is still overlapping the content, so the animation will never be seen. With a new class like page-view-ready, I can do the following:

.page__title {
  transition: 0.5s all ease-in-out;
}

html.page-view-ready .page__title {
  color: fuchsia;
  transform: scale(1.05) rotate(-1deg) translate(1rem, -1rem);
}

page-view-ready.mp4

[swashbuck]

@oliverfoster Per your comments, I was going to add this to core/js/router.js. It makes sense to add it to showLoading() and hideLoading() because the purpose of the class is to know when the loading screen has been removed.

However, hideLoading() is seemingly never called. Instead, specific scripts (ex. Core's contentObjectView.js, Language Picker's languagePickerView.js, Spoor's wrapper.js) directly hide the loading layer with $('.js-loading').hide(). So, unfortunately, this cannot reliably be used.

Would it be better to update those other locations (ex. Language Picker) so that they always hide the loading screen via the router methods? Or should I look into your other suggestion about adding this to isReady() in core/js/views/contentObjectView.js?

[oliverfoster]

🎉 This issue has been resolved in version 6.40.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀