SharePoint Ajax Loading Dialog

Just a quickie - and for my own reference later on :)

This morning I really wanted to improve the user experience of my SharePoint site by showing a "Loading" screen when I was busy doing some Ajax calls to either enable/disable menu buttons or once a menu is clicked.

So basic requirements were:

1. Allow user to see Loading screen when ajax call is taking a long time
2. Only show the Loading screen after a certain amount of time, i.e. dont show it everytime there is a ajax call - this stops the flicker.
3. Only show it for as long as is needed, i.e. no faking of time to stop the flicker.
4. Must wire up to MS Ajax, JQuery Ajax, and SP Ajax calls

After some research and lots of debugging I came up with the following javascript:

var Loading = {

    WaitTimeBeforeShowingDialog: 1000,

    _waitDialog: null,
    _requestCount: 0,
    _firstRequest: null,

    RequestEnded: function (sender, args) {

        var now = new Date().getTime();

        Loading._requestCount--;
        console.log("Requests: " + Loading._requestCount);

        if (Loading._requestCount <= 0) {
            var delay = (now - _firstRequest);
            console.log("Total Request Time: " + delay);
        }

        if (Loading._requestCount <= 0 && Loading._waitDialog) {
            Loading._waitDialog.close();
            Loading._waitDialog = null;
        }
    },

    RequestStarted: function (sender, args) {

        Loading._requestCount++;

        console.log("Requests: " + Loading._requestCount);

        if (Loading._requestCount == 1) {
            _firstRequest = new Date().getTime();

            setTimeout(function () {

                var now = new Date().getTime();
                var delay = (now - _firstRequest);

                if (delay > Loading.WaitTimeBeforeShowingDialog && Loading._requestCount > 0 && !Loading._waitDialog) {
                    Loading._waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress...', 76, 330);
                }

            }, Loading.WaitTimeBeforeShowingDialog);
        }        
    },

    Init: function () {
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(Loading.RequestStarted);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Loading.RequestEnded);
        SP.ClientContext.get_current().add_beginningRequest(Loading.RequestStarted);
        SP.ClientContext.get_current().add_requestFailed(Loading.RequestEnded);
        SP.ClientContext.get_current().add_requestSucceeded(Loading.RequestEnded);
        $(document).ajaxStart(Loading.RequestStarted);
        $(document).ajaxComplete(Loading.RequestEnded);
        $(document).ajaxError(Loading.RequestEnded);
    }
}


if (typeof (console) === 'undefined') {
    console = function () { };
    console.log = function (msg) {
        // do nothing 
    };
}

ExecuteOrDelayUntilScriptLoaded(function () {

$(document).ready(function () {
    Loading.Init();
});

}, 'sp.js');



I promise there is a agile/management post coming soon :)