Loading Modal/Screen for SPServices Processing

Sep 7, 2012 at 2:08 PM

This may fall in more of a Javascript question than a SPServices one but I figured it may be nice to see what the community thinks.

During (larger) SPServices calls, we see a browser freeze-up while JS finishes execution. Here's a couple things I've tried...

  • Hiding the page and displaying a loading .gif. The page does a bit of FOUT and the .gif does not animate while JS is working.
  • Using a modal. Modal does not have time to load while the rest of JS starts running, so it effectively will flash on and off when JS completes.

What steps do you recommend in providing users with a loading splash screen during these intensive executions?

Sep 7, 2012 at 2:35 PM
Edited Sep 7, 2012 at 2:37 PM

Went with the following from stackoverflow (http://stackoverflow.com/a/2995896/1071604)...

var process = { 
    steps: [ 
        function(){ 
            // step 1 
            // display gif 
        }, 
        function(){ 
            // step 2 
        }, 
        function(){ 
            // step 3 
        }, 
        function(){ 
            // step 4 
            // hide gif 
        } 
    ], 
    index: 0, 
    nextStep: function(){ 
        this.steps[this.index++](); 
        if (this.index != this.steps.length) { 
            var me = this; 
            window.setTimeout(function(){ 
                me.nextStep(); 
            }, 0); 
        } 
    } 
}; 
 
process.nextStep(); 
Coordinator
Sep 11, 2012 at 8:29 PM

That's a cool approach. IE seems to be the real outlier with this sort of thing. You'll probably find that other browsers show animated GIFs and such just fine while an operation is in progress.

M.

May 15, 2013 at 8:51 PM
Has anyone found any other ways to deal with this? I am making around 20 calls to SPServices for cascading dropdowns and filters, and have about 4-5 seconds of freeze time while loading.

I noticed the demo site for 2013.1 has a great loading animation with Promises:
http://sympmarc.com/2013/05/01/comparing-spservices-2013-01-calls-with-async-vs-promises-methods/

I upgraded to 2013.1 hoping to take advantage of that but I am unsure how to implement it. Based on the article above Promises should allow the calls to be made without locking up the browser. Do I need to change settings in the SPServices file? All of my SPService calls still work great in 2013.1 on SharePoint 2010 but the freeze time still exists.
Coordinator
May 16, 2013 at 5:20 AM
brentonwl:

While I've implemented promises in 2013.01, I didn't switch all of the value-added functions to use them. Because of the way cascading works, I have to be sure that they happen fully and in the right order. That mean I still have the "freeze time" you mention.

You should see some improvement with 2013.01 regardless, as I reengineered quite a few things under the covers. If you'd like to post your code, I may be able to make some suggestions to speed things up.

M.
May 17, 2013 at 4:51 AM
Edited May 17, 2013 at 5:07 AM
Marc,

Nothing out of the ordinary I don't think... just a bunch of calls to SPServices. I am using getScript because I am calling SPServices from a separate JS file (test.js) which is referenced by the master page.
$(document).ready(function () {
$.getScript("/sites/TestSite/SiteAssets/jquery.SPServices-2013.01.min.js", successInitializeSPServices);
});
function successInitializeSPServices() {
// Change Input Dropdowns to Select Dropdowns.
    $().SPServices.SPComplexToSimpleDropdown({
        columnName: "Column1",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPComplexToSimpleDropdown({
        columnName: "Column2",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPComplexToSimpleDropdown({
        columnName: "Column3",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPComplexToSimpleDropdown({
        columnName: "Column10",
        completefunc: null,
        debug: false
    });
  $().SPServices.SPComplexToSimpleDropdown({
        columnName: "Column11",
        completefunc: null,
        debug: false
    });

    
    // Set up cascade
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "{Column4ListGUID}",
        relationshipListParentColumn: "CategoryLookup",
        relationshipListChildColumn: "Title",
        parentColumn: "Column4",
        childColumn: "Column5",
        listName: "TestList",
        debug: false
    });

    
    // Set up filters on dropdown for active items.

    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column3ListGUID}",
        relationshipListColumn: "Title",
        columnName: "Column3",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
 
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column2ListGUID}",
        relationshipListColumn: "Title",
        columnName: "Column2",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
 
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column1ListGUID}",
        relationshipListColumn: "Title",
        columnName: "Column1",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });

   
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column6ListGUID}",
        relationshipListColumn: "Title",
        columnName: "Column6",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
   
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column7ListGUID}",
        relationshipListColumn: "Title",
        relationshipListSortAscending: false,
        columnName: "Column7",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column8ListGUID}",
        relationshipListColumn: "Title",
        relationshipListSortAscending: false,
        columnName: "Column8",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column9ListGUID}",
        relationshipListColumn: "Title",
        relationshipListSortAscending: false,
        columnName: "Column9",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column10ListGUID}",
        relationshipListColumn: "Title",
        relationshipListSortAscending: false,
        columnName: "Column10",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
    $().SPServices.SPFilterDropdown({
        relationshipList: "{Column11ListGUID}",
        relationshipListColumn: "Title",
        relationshipListSortAscending: false,
        columnName: "Column11",
        CAMLQuery: "<Eq><FieldRef Name='Active_x003f_' /><Value Type='Boolean'>1</Value></Eq>",
        completefunc: null,
        debug: false
    });
}