Use scheduler.yield() to keep the main thread responsive during long tasks

// processInChunks.ts
 
/**
 * Yields to the browser between chunks of synchronous work.
 * Uses scheduler.yield() when available, with a MessageChannel fallback
 * for browsers that do not yet support the Scheduler API.
 */
function yieldToMain(): Promise<void> {
  // scheduler.yield() is available in Chrome 115+ and Edge 115+
  if ('scheduler' in globalThis && 'yield' in (globalThis as any).scheduler) {
    return (globalThis as any).scheduler.yield();
  }
 
  // MessageChannel fallback — faster than setTimeout(0) because it uses
  // a microtask-adjacent message port rather than a 4 ms clamped timer.
  return new Promise<void>((resolve) => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = () => resolve();
    port2.postMessage(null);
  });
}
 
/**
 * Process a large array in chunks, yielding to the browser between each chunk.
 *
 * @param items      - The full array to process
 * @param processor  - Function applied to each item
 * @param chunkSize  - Number of items to process before yielding (default: 50)
 */
export async function processInChunks<T>(
  items: T[],
  processor: (item: T, index: number) => void,
  chunkSize = 50
): Promise<void> {
  for (let i = 0; i < items.length; i++) {
    processor(items[i], i);
 
    // Yield at the end of each chunk (not after every item — that would be too slow)
    if ((i + 1) % chunkSize === 0 && i + 1 < items.length) {
      await yieldToMain();
    }
  }
}

// ❌ Blocks the main thread for potentially hundreds of milliseconds
function renderSearchResults(results: SearchResult[]) {
  for (const result of results) {
    renderCard(result); // involves DOM mutation
  }
}
 
// ✅ Yields between chunks — input events are processed between chunks
async function renderSearchResults(results: SearchResult[]) {
  await processInChunks(results, (result) => renderCard(result), 25);
}

// ❌ Long synchronous data transformation
function buildReportData(transactions: Transaction[]): ReportRow[] {
  return transactions.map((t) => expensiveTransform(t));
}
 
// ✅ Yielding version that accumulates results
async function buildReportData(transactions: Transaction[]): Promise<ReportRow[]> {
  const results: ReportRow[] = [];
  await processInChunks(transactions, (t) => {
    results.push(expensiveTransform(t));
  });
  return results;
}

// lib/long-task-observer.ts (development only)
if (
  process.env.NODE_ENV === 'development' &&
  typeof PerformanceObserver !== 'undefined'
) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.duration > 50) {
        console.warn(
          `[LongTask] ${entry.duration.toFixed(1)} ms`,
          entry
        );
      }
    }
  });
  observer.observe({ type: 'longtask', buffered: true });
}