DEV Community


Posted on • Updated on

Unresponsive UI and a busy main thread?

Say you are in a situation where you have a Popup with a close button and a loader asking you users to wait while you process a lot of data before you display it to them.
You have to carry out computation on a list of items before displaying them.
UX Problem
If we carry this processing out in the main thread, if the users click the close button - it may not respond as the main thread is busy and not listening for the close button event.

WebWorkers may not work if dom elements
My first goto would be Web Workers but sometimes we cannot use a worker because we may need to use DOM Elements with the values in the list.

So we need to yield control from time to time to process other events in the main thread.
But there is no native sleep method so I am using the following custom function, 'fakeSleep'

  fakeSleep(pTimeSec) {

    return new Promise((resolve, reject) => {
      setTimeout(() => {
      }, pTimeMillisec);// 16 ms is a good value (60 fps/1 sec ~ 16 ms per frame)

   fakeSleep(0.1);// or 0.05 anything you wish 
   fakeSleep(0.1);// or 0.05 anything you wish 
   fakeSleep(0.1);// or 0.05 anything you wish 
Enter fullscreen mode Exit fullscreen mode

By yielding control even for a small amount of time in between our heavy processing, we can make the UI responsive.

This is a solution for extreme situations but I have had the need to use this while processing a lot of data on the client.

Happy to hear how you handle such situations.

Top comments (3)

duncan_true profile image

Great post! I’ve run into similar issues with unresponsive UIs. Your fakeSleep method seems like a straightforward workaround. I’ll definitely try it next time. Thanks for sharing!

amythical profile image

Ive been reading about long tasks in Chrome - will make a post soon on this but the 1 sec fakesleep should be about 15ms or so ...

amythical profile image
amythical • Edited

I stumbled upon scheduler.yield in Chrome which does a similar job