A partial archive of https://discourse-mediawiki.wmflabs.org as of Saturday May 21, 2022.

JavaScript/ResourceLoader: General “load mask” available?

Osnard

Conditional loading of a module by mw.loader.using can take some time if the requested module is big (e.g. because of a dependency to oojs-ui). The user does not know that something is being loaded in the background. Is there a way to show a “Loading” mask (with a spinner) above the whole document until a module is loaded?

I imagine something like this:

mw.loader.pushPending();
mw.loader.using( 'some-module-that-depends-on-oojs' ).done( function() {
    mw.loader.popPending();
    //Show dialog...
});

I’ve looked at https://doc.wikimedia.org/oojs-ui/master/js/ and https://doc.wikimedia.org/mediawiki-core/master/js/ but only found OO.ui.mixin.PendingElementwhich - unfortunately - is part of oojs-ui and therefore not available for my purpose.
Or is there another recommendation for this case?

WMDE-Fisch

Personally I would do exactly what you propose but just use my own vanilla / jQuery implementation for the spinner and overlay. Create your own pane, add it to the DOM and style it. Then removed in the done() callback. :slight_smile:

Tgr

There’s the (rather poor looking) jQuery.plugin.spinner. Note that mw.loader.using can load from cache or localstorage, which cannot be trivially detected but is fast enough to look ugly (the spinner will just flash in for a sec).

brion

There’s an old bug about improving consistency of the various spinners https://phabricator.wikimedia.org/T75972 – it may be worth revisiting that to make sure we have a good default progress indicator widget that can be used by any code.

For now the jQuery spinner plugin is easy to use, but it ain’t pretty.

Osnard

Thanks for all responses. I’ve decided to implement something on my own.

I don’t know the plans of WMF regarding the future of oojs-ui, but if it is meant to be used outside of “edit mode” and special pages it should either be available on a normal page load (probably a bad idea, as it is a huge overhead in most cases) or the user should get some kind of feedback that a background process is running (maybe with an unobtrusive, non-blocking element like the “loading progress line” in gitlab[1]).

[1] https://gitlab.com/gitlab-org/gitlab-ce/uploads/45f997fa986f28d513904cf0375473ef/Progress_Bar_50.png

Tgr

MediaViewer has a much less discreet progress bar, plus the page goes black, and people still manage not to notice it.

In general, though, what kind of loading notification is available depends very much on the application and is hard to generalize. It might do speculative loading (MediaViewer starts loading when you hover over a thumbnail for a few milliseconds, it does not wait for the click), it might take over the whole screen and even an unobtrusive progress bar would interfere, it might have its own loading indicator which makes much more sense (such as the VisualEditor dialog background animations) etc.