CODEWITHSUNDEEP
javascriptkendo-uikendo-chart
casillas
casillas

Reputation: 16793

Loading Image Animation only once

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

Upvotes: 0

Views: 138

Answers (1)

ezanker
ezanker

Reputation: 24738

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);
    }
});

Updated FIDDLE

Upvotes: 1

Related Questions