how to overcome multiple loaders issue

Earlier we used to show and hide loaders when we make any ajax calls. Later we move the code on a _Layout.cshtml file and kept the hiding and showing of loader logic inside ajaxStart and ajaxStop.

But now we come under a situation where we have a ag grid that has few cascaded dropdowns. So now when we perform a save operation on that ag grid, we are loading all the dropdown columns and that gives multi flickers on the screen till the time all the data gets loaded.

How I can over come this situation so that I get only 1 loader while all the dropdown data gets loaded. Below is my code that I have tried. I also dont want to hide and show the loader on each and specific page and that was the reason I moved it into the _Layout.cshtml file which is referred on all the cshtml pages. Any approach in the right direction would be very helpful. Thanks in advance.

$(document).ready(function () {
    $(document).ajaxStart(function () {
        debugger;
        $("#cover-spin").fadeIn(50);
    });
    $(document).ajaxStop(function () {
        debugger;
        $("#cover-spin").fadeOut("slow");
    });
});

You need to sign in to view this answers

Related Post