JS addClass() uirepaint/ rendering issue

Question

I have a JS code that takes some time to execute, so I wanted to show loader till the code is executed. What I have did so far is like

$(".loader-block").addClass("show");
// simulate a 5 second delay
setTimeout(() => { $(".loader-block").removeClass("show"); }, 5000);

.loader-block {
    width: 417px;
    height: 100%;
    background: #eee;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 9;
}

.loader-block.show {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="loader-block">
   <img src="/img/new-loader.gif" alt="Goodness never stops to wait for you">
</div>

JS CODE

$(".loader-block").addClass("show");
......
.... Some JS Code
......
$(".loader-block").removeClass("show");

HTML

<div class="loader-block">
   <img src="/img/new-loader.gif">
</div>

CSS

.loader-block {
    width: 417px;
    height: 100%;
    background: #eee;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 9;
}

.loader-block.show {
    display: block;
}

I confirmed that class is been applied to element and gets removed after execution, but the display:block css (which is in show class) is not reflected while the show class is applied. In short I feel this is something related to UI repaint. Any suggestions would be much appreciated.

I even checked applying display:block css directly to element, I see the css is applied but result is not rendered.

Try .loader-block.show { display: block !important; } with this. — Khushbu, Jul 09 '20 at 11:47
I made a snippet of code that simulates your situation, I think we need more information regarding the code in between as what you have seems to work — Mark Schultheiss, Jul 09 '20 at 11:53
Does this answer your question? [DOM refresh on long running function](https://stackoverflow.com/questions/16876394/dom-refresh-on-long-running-function) — CBroe, Jul 09 '20 at 12:27
Your JS code runs from start to finish, and only after that control is handed back to the rendering engine. So you need to artificially “interrupt” the process here, so that the class change can take effect. Check the mentioned duplicate, it has a few approaches to that, like using a timeout, requestanimationframe, and something that uses the await/async concept (that will only work in moderately recent browsers though.) — CBroe, Jul 09 '20 at 12:30
Thanks @CBroe, I understood what was happening with the help of your comment. I created an interrupt and it worked. I would like to create an answer for it, but seems the question has been closed. How can I write answer for it ? — Abdul Pathan, Jul 09 '20 at 14:39

score 0 · Answer 1 · answered Jul 09 '20 at 12:21

While the comments on the question solves the problem, a realiable method would be to dispatch an event once your JS is executed and to have an event handler that can remove the spinner.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

score 0 · Accepted Answer · answered Jul 10 '20 at 15:05

I got the solution with the help of comment from @CBroe. I would like to post the reason & solution so that others may get an help from it. As mentioned in the comment,

Your JS code runs from start to finish, and only after that control is handed back to the rendering engine.

the code between addClass() and removeClass() was executed continuously and only after that the styles updates were rendered. So adding an interrupt solved my problem.

OLD CODE:

$(".loader-block").addClass("show");
......
.... Some JS Code
......
$(".loader-block").removeClass("show");

NEW CODE:

$(".loader-block").addClass("show");
setTimeout(() => {
     ......
     .... Some JS Code
     ......
     $(".loader-block").removeClass("show");
}, 5);

Thanks for the support.

If using setTimeout with a delay of 0 does not yield the correct results, then using a value of 5 may work, but is not reliable as it will depend on how fast the client processes the changes applied via the CSS class. — SquareCat, Apr 26 '23 at 05:42

JS addClass() uirepaint/ rendering issue

2 Answers2