Javascript - Show Spinner, Save Data Synchronously, Remove Spinner

Question

I am trying to create a javascript plugin that allows you to hook into the save operation. I want some logic wrapped around the logic though:

1. Show a spinner
2. Execute save hook-in
3. Execute save logic
4. Remove Spinner

here is an example of my code:

function save(){
    var settings = getSettings();

    showSpinner();

    // Hook-in call
    if(settings.onSave)
        settings.onSave();

    saveState();

    removeSpinner();
}

showSpinner() just hides save/cancel buttons and shows a spinner in its place.

hideSpinner() does the opposite.

saveState() saves the data from input fields to their data attributes.

settings.onSave() can be whatever code is passed in to the config by a user of the plugin.

When I run the process the spinner never shows up even though the hook-in I have defined takes ~1.5 seconds to return. If I pause the code in the debugger, the spinner does have a chance to show and it does disappear after the operation is complete.

What is the best approach to resolve this? I am not at all familiar with asynchronous design patterns within javascript. I know there is a single thread that the javascript can run on but I don't know why the save operation is getting in the way of showing the spinner.

Answer 1

Your browser won't update the interface until Javascript gives back control to the browser, meaning you need to return from function before the browser will show the spinner. Use setTimeout to give control back to the browser briefly.

function save(){

    showSpinner();

    setTimeout(function(){
        var settings = getSettings();

        // Hook-in call
        if(settings.onSave)
            settings.onSave();

        saveState();

        removeSpinner();
    }, 0 );
}