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

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

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

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay