Attribute changes with MutationObserver only found if code is inside a loop

Question

I am having some trouble detecting attribute changes of an html element with js and MutationObserver. This is the code:

document.addEventListener("DOMContentLoaded", function() {

  const checkForLoading = setInterval(function () {

    let loading = document.getElementById("sequence");

    if (loading) {
        console.log("loading detected");

        const loadingObserver = new MutationObserver(function (mutations) {
          console.log("mutation detected");
          if (loading.getAttribute('data-dash-is-loading') === 'true') {
            console.log("loading");
            // loading.style.visibility = 'hidden';
          } else {
            console.log("not loading");
            // loading.style.visibility = 'visible';
          }
        });

        const observerOptions = {
          attributes: true,
        }

        loadingObserver.observe(loading, observerOptions);
        clearInterval(checkForLoading);
    }
  }, 100);
});

Because the element is not available immediately I have the checkForLoading loop set up. The attribute 'data-dash-is-loading' is only set when an element is loading and otherwise not available. This code only works if the loop keeps on running after the sequence element is detected and clearInterval(checkForLoading) is not called. However I would like to avoid running this loop constantly. Any help to fix this issue is greatly appreciated.

Answer 1

It usually means the element is recreated, so you need to observe its ancestor higher up the DOM tree and add subtree: true.

For example, a parent element:

loadingObserver.observe(loading.parentElement, {attributes: true, subtree: true});

If this doesn't help at once you can try document.body first to make sure the mutation actually happens, then try various ancestor elements in-between to find the one that stays the same.

In the callback you'll need to verify that the mutation occurred on your desired element:

for (const m of mutations) {
  if (m.target.id === 'foo') {
    // it's the desired element, do something about it here and stop the loop
    break;
  }
}