Refined-github: Let's make Refined GitHub faster ⚡️

[fregante]

This is a followup to https://github.com/sindresorhus/refined-github/pull/2605

In that PR I made some small changes to 3 features to avoid content jumps.

You can contribute more of these changes:

• either by finding which features could benefit from faster loading, or
• by sending a PR with those changes.

Some features could just benefit from some minimal caching, others need element-ready

Here are some:

• [x] batch-open-all ("Open all" dropdown added late)
• [x] pr-filters ("Status" dropdown added late, also because the value isn't cached)
• [x] clean-issue-filters
• [x] default-branch-button
• [x] latest-tag-button
• [x] hide-zero-packages
• [ ] ... find more!

If you want to send PRs, please send one per feature.

[fregante]

Here's what it takes to make a feature appear faster: 860da060

- const branchSelector = select('#branch-select-menu')!;
+ const branchSelector = (await elementReady('#branch-select-menu'))!;

...

- load: features.onAjaxedPages,
+ load: features.nowAndOnAjaxedPages,

[fregante]

It turns out that this change is not as simple as I showed earlier. elementReady doesn't wait for _the whole element's content_ to be loaded, but merely the element itself.

I noticed that some features (like #2790 and bugs-tab) sometimes fail because elementReady resolves before the content is available, so they error.

.container + * should be used to test the readiness (+ * only works if there's a sibling; if the sibling exists, the previous element loaded in full) and then select should still be used to select the exact element we're looking for. Example: https://github.com/sindresorhus/refined-github/pull/2790/commits/48f47d69457790be05ef5cf52d5f5b6022925d04

[sindresorhus]

It turns out that this change is not as simple as I showed earlier. elementReady doesn't wait for the whole element's content to be loaded, but merely the element itself.

What do you mean by "whole element's content"? Do you mean also the child elements? Is there anything element-ready could do to make this simpler?

[fregante]

Do you mean also the child elements?

Correct. I saw bugs-tab fail because it finds the Issues tab but at the time of cloneNode there's nothing inside yet, so it fails a bit later.

Is there anything element-ready could do to make this simpler?

Maybe! Implement + * via JS:

const found = querySelector();
if (found) {
    let parent = found.parentElement;
    while (parent) {
        if (parent.nextSibling) {
            resolve(found);
        }
        parent = found.parentElement;
    }
}

However this will fail if both of these are true:

• found is literally the last node on the page
• stopOnDomReady: false

Can you open an issue there?

[sindresorhus]

https://github.com/sindresorhus/element-ready/issues/29

[yakov116]

Closed for housekeeping purposes?

[fregante]

Yes