Is the JavaScript `event loop` taking a coffee break? My `async/await` is freezing everything!

hey everyone, so after my last post about async being a circus, i've hit a new act of pure chaos. i'm trying to make my dashboard snappy with async/await for data fetching, but it feels like i'm just making things worse.

• The Problem: i've got several data widgets that fetch info from different api endpoints. i'm using async/await for each call, thinking it'd be nice and non-blocking. but instead, the whole UI just locks up for a few seconds when a fresh data pull happens. then, all the data pops in at once. it's not a smooth experience, and users are complaining about the 'lag'.

• What I've Tried:
  

  • Initially, i thought maybe i had too many sequential awaits, so i tried using Promise.all to fetch some of the independent data streams in parallel. no real change, still a noticeable freeze.
  • i even tried wrapping the UI update logic in a setTimeout(..., 0) just to push it to the macrotask queue, hoping the browser would render first. nope, didn't help.
  • i've checked network tabs, api responses are usually fast, sub-500ms. it's definitely client-side blocking.

• Expected vs. Actual: i expected async/await to make my code non-blocking, allowing the UI to remain responsive while data fetches happen in the background. but it's acting more like a synchronous block until all promises resolve. i'm starting to think the event loop is just ignoring my stuff or maybe i'm misunderstanding how microtasks/macrotasks interact when the main thread is 'busy' with awaiting.

• Dummy Code Snippet:

  async function loadDashboardData() {
    console.log('Fetching dashboard data...');
    try {
      const [userData, productData, salesData] = await Promise.all([
        fetch('/api/users').then(res => res.json()),
        fetch('/api/products').then(res => res.json()),
        fetch('/api/sales').then(res => res.json())
      ]);
  
      // This part seems to block the UI even though fetches are done.
      // Simulating heavy UI update or processing after data arrives
      let bigArray = [];
      for (let i = 0; i < 10000000; i++) {
        bigArray.push(i);
      }
      console.log('Processed big array length:', bigArray.length); // this log appears AFTER the UI unfreezes
  
      updateUserWidget(userData);
      updateProductWidget(productData);
      updateSalesWidget(salesData);
  
      console.log('Dashboard updated!');
    } catch (error) {
      console.error('Failed to load dashboard:', error);
    }
  }
  
  // Calling it, expecting non-blocking behavior
  loadDashboardData();
  

• The Ask: what am i missing about the event loop's actual behavior when async/await is involved, especially with post-fetch processing? is there a trick to truly keep the main thread clear during data processing after an await resolves, considering js's single-threaded concurrency model? or am i just doing something fundamentally wrong here?