Artificially slow down a component

Foo.tsx

function Foo() {
  const now = performance.now();

  /**
   * The result of the first performance.now() call (stored in now) is subtracted from the current time. 
   * This effectively calculates the time elapsed since the loop began.
   *
   * the loop keeps running as long as it hasn't been a full second since the startTime was captured. 
   * Once the elapsed time hits or goes above 200ms, the loop condition becomes false, and the loop terminates.
   */
  while (performance.now() < now - 200) { // wait for 200ms
   ...
  }

  return <div>some foo</div>;
};