SugarCube 2.0: Loadscreen API
The two functions of the <a href="http://www.motoslave.net/sugarcube/2/docs/api-loadscreen.html">Loadscreen</a> API are much more helpful than they can first seem. The {{{LoadScreen.lock()}}} "locks" (shows a loading screen) and {{{LoadScreen.unlock()}}} changes it.
[[Why lock the screen?]]We often need to lock the screen in order to process data. The most common example to be to remotely load something using another function like {{{importScripts()}}} or {{{importStyles()}}}.
(Note: this video doesn't cover either of those, but does show an example of how to use it in practice.)
<<button "Let's load some things -- and lock a screen!">>
<<goto "Load Things First">>
<</button>><<script>>
var lockID = LoadScreen.lock();
var promise = importScripts("https://code.jquery.com/ui/1.12.1/jquery-ui.min.js");
promise.then(function() {
// At this point, the scripts have been loaded
// and we can unlock safely
LoadScreen.unlock(lockID);
// Now that everything is loaded,
// go to the "Beginning" passage
Engine.play("Beginning");
});
<</script>>Code was remotely loaded and the screen unlocked! Ta da!