More consistent relative date display

[eritbh]

Timeago doesn't support operating on elements before they're in the DOM because it keeps intervals open to update the element's text and doing that for elements that aren't on the page anymore would leak memory. To work around this, we queue timeago to run after a tick so it happens after the rest of the HTML is on the page.

Interestingly I found that Promise.resolve().then(...) works faster than setTimeout(..., 0) in Firefox here - the latter results in significant flashing of non-relative date text when opening the popup, whereas the former has an opportunity to act after the target element is added to the DOM but before the next frame is rendered.

Screen recordings of both versions

Here's the setTimeout(..., 0) version:

6JaDBQy9mEH11i.mp4

And here's Promise.resolve().then(...):

JAPhgvbpyad11g.mp4

[eritbh]

A friend suggested a slightly less hacky way to do this might be with mutation observers. It's pretty much equivalent to what's going on here, doesn't have the flashing issue, and would work even if we didn't add the popup to the page immediately after creating it. The code is a bit more complicated, though, and it seems unlikely to address problems we'd run into since this is very module-local UI stuff rather than anything more general. Thought I'd drop it here anyway for reference.

new MutationObserver((mutations, observer) => {
    mutations.forEach(mutation => {
        if (!mutation.addedNodes.includes($noteRow[0])) {
            return;
        }
        $noteRow.find('time').timeago();
        observer.disconnect();
    });
}).observe(document.body, {subtree: true, childList: true});

[creesch]

LGM.

However, isn't this then also an issue in other places where we generate UI before showing it?

[eritbh]

From what I can see most of the existing timeago calls we make aren't really scoped the way I'm doing it here. A lot of the time we just $('time.timeago').timeago() which can only apply to things already in the DOM (since $() doesn't know about elements that only exist on the stack). I checked through all the other instances where we call .timeago() and they also all happen after the relevant elements are added to the DOM - except for one, which handles timestamp display in usernotes (and it looks like it was probably broken by me when I introduced TBui.pager() and restructured how notes are rendered there, so it's having the same problem as modnotes).

I'll add a commit to fix the issue there as well, but everything else should be working fine from what I can tell.

[eritbh]

Existing implementation fixed in the usernotes manager, and relative date handling has also been added to the main user notes popup as discussed on Discord.