How to add preloader to long running function

Question

I develop a custom html page with information about installed certificates on the local machine. The certificate's information I get by crypto provider api, then I filter returned certificates with some restrictions (Issuer, CommonName, etc). This is the work of my function loadCertificates. I show results on button click. But loadCertificates takes some seconds and I want to show preloader before loadCertificates and hide after:

        $("#select__cert-btn").click(function () {
            showPreloader();
            var certificates = loadCertificates(restrictions);
            hidePreloader();
            showCerificates(certificates);
        });

Functions showPreloader and hidePreloader only add/remove div with gif background to the container with certificates info. But when I click on the button my page seems frozen and only after some seconds show results (without appearing my preloader). But in debug mode, before run loadCertificates the preloader is added to html, but it's not visible.

Early I have never the same problem, but it seems like loadCertificates block main thread, but if I'm right why showPreloader not work correclty?

How to solve my problem?

If `loadCertificates` is asynchronous, then it is impossible for you to wait for its result unless the function returns a Promise, or has callback — blaz, Jan 10 '20 at 08:42
It looks like `loadCertificates` is *not* asynchronous. You need to give the browser time to update your preloader. Wrap all the code after showPreloader() in a `setTimeout` to allow the browser to update. There's a duplicate I read yesterday, which I'll try to find, so not a full answer. — freedomn-m, Jan 10 '20 at 09:12
Does this answer your question? [jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function](https://stackoverflow.com/questions/7342084/jquery-javascript-how-to-wait-for-manipulated-dom-to-update-before-proceeding) — freedomn-m, Jan 10 '20 at 09:13
@freedomn-m, it not helps. When I reached line with `loadCertificates` gif blocked — Ivan Tikhonov, Jan 10 '20 at 09:32
By "blocked" I assume you mean: "gif is now shown, but doesn't animate" - well that's the browser / plugin locking up your browser and nothing you can do about it other than changing how `loadCertificates` works. — freedomn-m, Jan 10 '20 at 09:37
@freedomn-m, you are absolutely right. Thank you. I will research `loadCertificates ` — Ivan Tikhonov, Jan 10 '20 at 09:40

score 0 · Answer 1 · answered Jan 10 '20 at 08:10

0

if your loadCertificates function call an endpoint via ajax then you can simply add a html region that will be hide/shown with a gif image (loading) :

<!-- Will be called on every ajax call to show the spinner -->
    <div class="row" id="ajaxLoading" style="display:none">
        <div class="col-md-4 offset-4">
            <img src="~/Images/loading.gif" />
        </div>

    </div>

then add in your scipt file :

var ajaxLoading = $('#ajaxLoading');
//add a spinner to every ajax call
    $(document).ajaxStart(function () {
        ajaxLoading.show();
    });
    $(document).ajaxStop(function () {
        ajaxLoading.hide();
    });

answered Jan 10 '20 at 08:10

Erwin Draconis

764
8
20

1

I don't use ajax – Ivan Tikhonov Jan 10 '20 at 08:16
how are you calling your API then ? – Erwin Draconis Jan 10 '20 at 08:29
API connected with plugin installed in browser. I use only one function plugin.Store.Open() – Ivan Tikhonov Jan 10 '20 at 08:33
1

your approach should work, if whatever loadCertificates() does is synchronous. If it isn't, then you will need to call the hidePreloader() method in a callback that fires when the operation (loadCertificates ) finishes. – Erwin Draconis Jan 10 '20 at 08:54

jeprubio · Accepted Answer · 2020-01-10T08:33:00.200

0

I would try to use a promise so that the loadCertificates runs async without locking the main thread.

Try this:

$("#select__cert-btn").click(function () {
    showPreloader();
    var certificates = new Promise(function(resolve, reject) {
       loadCertificates(restrictions);
       resolve();
    });
    certificates.then(function(result) {
        hidePreloader();
        showCerificates(certificates);
    });
});

edited Jan 10 '20 at 08:33

answered Jan 10 '20 at 08:16

jeprubio

17,312
5
45
56

Unfortunately I use IE 11 :( – Ivan Tikhonov Jan 10 '20 at 08:26
you could try this https://stackoverflow.com/questions/45509701/elegant-way-to-include-es6-promise-for-ie – jeprubio Jan 10 '20 at 08:33

How to add preloader to long running function

2 Answers2