Is it possible to display a loading symbol or spinner while Sugarcube’s load, delete, and save functions are called? It takes a few seconds to load my game.
I am using those functions through custom links with Config.saves... rather than the built-in save menu.
Twine Version: 1.x
Story Format: Sugarcube 2.x
Try doing:
<<set _lockID = LoadScreen.lock()>>
before calling the Save API function, and then afterwards do:
<<run LoadScreen.unlock(_lockID)>>
That will use the LoadScreen API to display a the “loading” spinner while that function is working.
Hope that helps! 
Hmm, didn’t work. Here is a sample of the code I have
<<link "Delete All">>
<<set _lockID = LoadScreen.lock()>>
<<script>>
Save.slots.delete(0);
Save.slots.delete(1);
Save.slots.delete(2);
Save.slots.delete(3);
Save.slots.delete(4)
<</script>>
<<run LoadScreen.unlock(_lockID)>>
<</link>>
Ideally I’d like to have just a small overlay in the corner rather than the full loading page as well…not sure if that is possible.
I also tried this…it isn’t working either.
<<link "Delete All">>
<<script>>
$("body").append("<div class='savespin'>Loading</div>");
Save.slots.delete(0);
Save.slots.delete(1);
Save.slots.delete(2);
Save.slots.delete(3);
Save.slots.delete(4);
<</script>>
This causes the symbol to show up but only after the saving (deleting) function is complete.
I assume that it is happening out of sequence because the actual javascript underneath Sugarcube is executed before in-story code, regardless of the order in which code is written in the passage, but I am not sure how to work around that.
Edit: after some tweaking I found that wrapping the script in <<timed>> does the trick but there may be a better way.
Sometimes code needs to give the browser an opportunity to refresh before doing the next thing, in order to get it to display things as expected. The use of the setTimeout() function is generally the simplest and and most broadly supported method to work around this problem.
Also, unless you’re sending them to a new page, then instead of <<link>>, it’s better to use <<button>>, since people expect links to take them to new pages while they expect buttons to stay on the same page. A part of good UI design is the use of consistent semantics, so people will know what things will do just by looking at them.
Thus, I’d rewrite what you have like this:
<<button "Delete All">>
<<script>>
$("body").append("<div id='savespin'>Please wait...</div>");
setTimeout(function () {
Save.slots.delete(0);
Save.slots.delete(1);
Save.slots.delete(2);
Save.slots.delete(3);
Save.slots.delete(4);
$('#savespin').remove();
}, 50);
<</script>>
<</button>>
That basically adds a slight delay after displaying “savespin” before it starts deleting the save slots, giving the browser time to update the screen before it starts deleting the slots.
Note that I also changed “savespin” from a class to an ID, since there should only be one on the page at a time, and that lets you target it specifically when removing it. Thus that code won’t remove any other “savespin” elements that it shouldn’t.
There are more “elegant” solutions than setTimeout() out there, however they’re more complicated to use and may not work well in a few browsers.
Hope that helps!
Thanks, I will try that out. I have heavily styled my game so the button vs link distinction isn’t really relevant (assuming the functionality is the same?) but setTimeout seems to be what I was looking for.
That’s much better, thanks!
Is there a way to use Save.clear() for a range of slots?
Just read the documentation that gulumige linked you to. All of the answers about what you can do using the Save API are there.
Yes, I see that there are no slot parameters for Save.clear(). I was hoping there was a way around that but I suppose not.