fix(pat navigation): Improve the performance when the navigation elements change.

Debounce the mutation observer callback which initialized the markings for 100ms for better performance.

Author: thet

src/pat/navigation/navigation.js

@@ -2,6 +2,7 @@ import Base from "../../core/base";
 import Parser from "../../core/parser";
 import logging from "../../core/logging";
 import events from "../../core/events";
+import utils from "../../core/utils";
 
 const log = logging.getLogger("navigation");
 
@@ -18,14 +19,7 @@ export default Base.extend({
         this.options = parser.parse(this.el, this.options);
 
         this.init_listeners();
-
-        if (this.el.querySelector(this.options.currentClass)) {
-            log.debug("Mark navigation items based on existing current class");
-            this.mark_current();
-        } else {
-            log.debug("Mark navigation items based on URL pattern.");
-            this.mark_items_url();
-        }
+        this.init_markings();
     },
 
     /**
@@ -68,15 +62,13 @@ export default Base.extend({
             this.el.querySelector(`a.${current}, .${current} a`)?.click();
         }
 
+        const debounced_init_markings = utils.debounce(
+            this.init_markings.bind(this),
+            100
+        );
         // Re-init when navigation changes.
         const observer = new MutationObserver(() => {
-            if (this.el.querySelector(this.options.currentClass)) {
-                log.debug("Mark navigation items based on existing current class");
-                this.mark_current();
-            } else {
-                log.debug("Mark navigation items based on URL pattern.");
-                this.mark_items_url();
-            }
+            debounced_init_markings();
         });
         observer.observe(this.el, {
             childList: true,
@@ -86,6 +78,19 @@ export default Base.extend({
         });
     },
 
+    /**
+     * Initial run to mark the current item and its parents.
+     */
+    init_markings() {
+        if (this.el.querySelector(this.options.currentClass)) {
+            log.debug("Mark navigation items based on existing current class");
+            this.mark_current();
+        } else {
+            log.debug("Mark navigation items based on URL pattern.");
+            this.mark_items_url();
+        }
+    },
+
     /**
      * Get a matching parent or stop at stop_el.
      *

src/pat/navigation/navigation.test.js

@@ -183,7 +183,7 @@ describe("Navigation pattern tests - no predefined structure", function () {
         const load_nav = document.querySelector(".load-nav");
         load_nav.click();
 
-        await utils.timeout(1); // wait for MutationObserver
+        await utils.timeout(120); // wait for MutationObserver
 
         const w1 = nav.querySelector(".w1");
         const a1 = nav.querySelector(".a1");