Desktop: Fixes #11129: Improve performance by allowing note list background timers to be cancelled

[personalizedrefrigerator]

Summary

This pull request cancels note list waitForElement intervals when note list items unmount. This should fix #11129.

Testing plan

With this PR

This pull request includes automated regression tests. At present, they do not verify that the background waitForElement interval stops. However, they do verify:

• useRootElement (the hook that wraps waitForElement) can find an element if it already exists in the DOM.
• useRootElement re-searches for an element if the elementId it's given changes (tests the case that no result is initially found).

Additionally, manual testing has been done (on Fedora 40):

1. Open the Electron dev tools and modify packages/lib/dom.js.

   diff

   diff --git a/dom.js b/dom-updated.js
   index e807b93..c9dfc91 100644
   --- a/dom.js
   +++ b/dom-updated.js
   @@ -22,6 +22,7 @@ const isInsideContainer = (node, className) => {
    exports.isInsideContainer = isInsideContainer;
    const waitForElement = (parent, id, cancelEvent) => __awaiter(void 0, void 0, void 0, function* () {
        return new Promise((resolve, reject) => {
   +        var start = Date.now()
            const iid = setInterval(() => {
                try {
                    const element = parent.getElementById(id);
   @@ -29,6 +30,7 @@ const waitForElement = (parent, id, cancelEvent) => __awaiter(void 0, void 0, vo
                        clearInterval(iid);
                        resolve(element);
                    }
   +                if (Date.now() - start > 1000) console.warn('long!')
                }
                catch (error) {
                    clearInterval(iid);

2. Press ctrl-s to apply the changes.

3. Clear the console with console.clear()

4. Scroll quickly through a long note list (style: detailed)

5. Repeat step 4 for style: compact.

6. Verify that no long! warnings are present in the console.

Comparison with before this PR

I then compared with a version of Joplin from before this change:

1. Open a copy of Joplin from before this change (v3.1.16).

2. Apply a the change from the previous testing steps to packages/lib/dom.js through the Electron dev tools.

   diff

   diff --git a/dom.js b/dom-updated.js
   index f229e6f..71486bf 100644
   --- a/dom.js
   +++ b/dom-updated.js
   @@ -23,6 +23,7 @@ exports.isInsideContainer = isInsideContainer;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
    const waitForElement = (parent, id) => __awaiter(void 0, void 0, void 0, function* () {
        return new Promise((resolve, reject) => {
   +        var start = Date.now()
            const iid = setInterval(() => {
                try {
                    const element = parent.getElementById(id);
   @@ -30,6 +31,7 @@ const waitForElement = (parent, id) => __awaiter(void 0, void 0, void 0, functio
                        clearInterval(iid);
                        resolve(element);
                    }
   +                if (Date.now() - start > 1000) console.warn('long!')
                }
                catch (error) {
                    clearInterval(iid);

3. Press ctrl-s to apply changes.

4. Scroll quickly through a long note list.

5. Verify that a large number of long! messages are logged and that the number of such log statements is increasing rapidly:
   

[laurent22]

Oh indeed, that wasn't good. Thanks for figuring this out @mephinet and @personalizedrefrigerator