New: Add html classes depending on the loading screen's visibility (fixes #423)

[swashbuck]

Fixes #423

Fix

Adds the following HTML classes:

• is-loading-visible - Loading overlay is visible
• is-loading-hidden - Loading overlay is hidden

Also

• Updates isReady() in contentObjectView.js so that it uses router.hideLoading() instead of the current $('.js-loading').hide()

Testing

Add some CSS that animates an element once the loading screen has been removed.

You may want to enable device throttling or add a large image to the page to increase the loading time.

.page__title {
  transition: 0.5s all ease-in-out;
}
html.is-loading-visible .page__title {
  color: deepskyblue;
}
html.is-loading-hidden .page__title {
  color: fuchsia;
  transform: scale(1.05) rotate(-1deg) translate(1rem, -1rem);
}

The animation should not play until the loading screen has been removed.

Related

The following plugins should be updated to use router.hideLoading() instead of the current $('.js-loading').hide(). Without this fix, the new classes will not be available.

• Language Picker - https://github.com/adaptlearning/adapt-contrib-languagePicker ✅
• Spoor - https://github.com/adaptlearning/adapt-contrib-spoor ✅

[cahirodoherty-learningpool]

👀

[oliverfoster]

🎉 This PR is included in version 6.40.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀