Please document your script.

I want to learn MutationObserver, yet all of the documentations I've read thus far are either not clear or over complicated.

Your script seems to be a good example for people who are new to MutationObserver.

here is an implementation example on MutationObserver
MutationObserver checks after every change. In some cases, setInterval is more efficient due to the cost of fewer resources.

    waitElement('body')
      .then(el => {
        console.log('el:', el);
      });

function waitElement(selector, container) {
  if (container && !(container instanceof HTMLElement)) return console.error('wait > container not HTMLElement:', container);

  return new Promise(resolve => {
    if (element = (container || document.body || document).querySelector(selector)) return resolve(element);

    const observer = new MutationObserver(mutations => {
        if (element = (container || document.body || document).querySelector(selector)) {
            resolve(element);
            observer.disconnect();
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
  });
}

you can use asynchronous calls
await Promise.resolve(document.body.querySelector(selector))

or you can use Promise. But alas, it does not return the element itself. It is only suitable for waiting for the html element

function waitElement(selector = required(), container) {
   if (typeof selector !== 'string') return console.error('wait > selector:', typeof selector);
   if (container && !(container instanceof HTMLElement)) return console.error('wait > container not HTMLElement:', container);
   // console.debug('waitElement:', selector);

   return Promise.resolve((container || document.body).querySelector(selector));
}

You can also use some of the ready-made function libraries. Many of them are used by greasyfork authors

// https://stackoverflow.com/a/68262400
// best https://codepad.co/snippet/wait-for-an-element-to-exist-via-mutation-observer
// alt:
// https://git.io/waitForKeyElements.js
// https://github.com/fuzetsu/userscripts/tree/master/wait-for-elements
// https://github.com/CoeJoder/waitForKeyElements.js/blob/master/waitForKeyElements.js
// https://gist.githubusercontent.com/sidneys/ee7a6b80315148ad1fb6847e72a22313/raw/
// https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js (ex: https://greasyfork.org/en/scripts/429783-confirm-and-upload-imgur)
// https://greasyfork.org/scripts/464780-global-module/code/global_module.js

Here is an interesting hybrid MutationObserver + setTimeout

https://greasyfork.org/en/scripts/460977-autoclick-resume-button-in-rooms-at-character-ai/code

I'm not sure how effective it is, but provided that the filtering

childList: true
subtree: true

insufficient. And the use of larger triggers is too resource-consuming, so perhaps in some cases it is justified