DEV Community

amythical
amythical

Posted on • Edited on

Unresponsive UI and a busy main thread?

Situation
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.

Solution
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(() => {
        resolve();
      }, pTimeMillisec);// 16 ms is a good value (60 fps/1 sec ~ 16 ms per frame)
    });
  }

  processingFunction1();
   fakeSleep(0.1);// or 0.05 anything you wish 
  processingFunction2();
   fakeSleep(0.1);// or 0.05 anything you wish 
  processingFunction3();
   fakeSleep(0.1);// or 0.05 anything you wish 
  processingFunction4();
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.

Cheers.
Happy to hear how you handle such situations.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (3)

Collapse
 
duncan_true profile image
Dun

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!

Collapse
 
amythical profile image
amythical

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 ...

Collapse
 
amythical profile image
amythical • Edited

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay