Loading Image Animation only once

Question

I have the following implementation and it is fully functional. I need to show loading animation image first time only, my current implementation it shows loading animation all the time.

 var theDataSource = new kendo.data.DataSource({
        transport: {
             read: function (op) {
                 setTimeout(function () {
                     op.success(data);
                 }, 4000);
             }
        },
        group: {
            field: "series"
        },
        sort: {
             field: "category",
             dir: "asc"
         },
         requestStart: function () {
            kendo.ui.progress($("#loading"), true);
          },
         requestEnd: function () {
              kendo.ui.progress($("#loading"), false);
         }
});

FIDDLE

if you mean the first time in a session, you could use a sessionStorage variable and check if it is set before showing the animation: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage — ezanker, Jun 11 '15 at 14:31
@Ezanker, yes I want to use `sessionStorage` variable, however since I define time variable inside the `theDataSource`, how `sessionStorage` could come to the picture in my current implementation? — casillas, Jun 11 '15 at 14:48

score 1 · Accepted Answer · answered Jun 11 '15 at 16:47

Set time to a variable which defaults to your delay time (4000). Then check your sessionStorage variable to see if we have already run. If so set time to 0.

Save the sessionStorage variable on requestEnd and also check it before showing the loading animation:

var time = 4000;
var HasRun  = sessionStorage.getItem('HasRun');
if (HasRun){
    time = 0;
}
var theDataSource = new kendo.data.DataSource({
    transport: {
         read: function (op) {
             setTimeout(function () {
                 op.success(data);
             }, time);
         }
    },
    group: {
        field: "series"
    },
    sort: {
        field: "category",
        dir: "asc"
    },
    requestStart: function () {
        if (!HasRun){
            kendo.ui.progress($("#loading"), true);
        }
    },
    requestEnd: function () {
        kendo.ui.progress($("#loading"), false);
        sessionStorage.setItem('HasRun', true);
    }
});

Loading Image Animation only once

FIDDLE

1 Answers1

Updated FIDDLE