Wait for a DOM element to appear with a MutationObserver

waitForDomElement.js

const waitForElement = selector => new Promise((resolve, reject) => {
  const element = document.querySelector(selector);

  if (element) {
    return resolve(element);
  }

  const timeout = setTimeout(() => reject(new Error('element not found')), 15000);

  const walkDOM = (node, fn) => {
    if (node.matches && node.matches(selector)) {
      return fn(node);
    }
    node = node.firstChild;
    while (node) {
      walkDOM(node, fn);
      node = node.nextSibling;
    }
  };

  try {
    const observer = new MutationObserver((mutations => {
      mutations.forEach(mutation => {
        const nodes = Array.from(mutation.addedNodes);
        return nodes.forEach(node => walkDOM(node, match => {
          observer.disconnect();
          clearTimeout(timeout);
          return resolve(match);
        }));
      });
    }));

    observer.observe(document.documentElement, { childList: true, subtree: true });
  } catch (err) {
    return reject(err);
  }
});

The observer should also be disconnected on timeout, no ?