Refined-github: Restore `reactions-avatars`

[fregante]

Github no longer loads who reacted in the aria-label until you hover 😞

_Originally posted by @yakov116 in https://github.com/sindresorhus/refined-github/issues/3120#issuecomment-632331245_

reactions-avatars stopped working (https://github.com/sindresorhus/refined-github/issues/3120) because of this change.

The feature used to look like this:

Since the usernames are no longer available on the DOM _until it's too late,_ the only fix is to load these usernames via the API.

The problem is that this call might be rather large on very active discussions, so this might no longer be worth it.

PR welcome to figure out what changes are required and what the impact would be on large conversations like https://github.com/facebook/react/issues/13991

[fregante]

Another solution to consider is to trigger GitHub’s requests (those that happen on hover) and then update add the avatars once they load.

This causes multiple requests per page but… this feature is already relatively heavy HTTP-wise (it loads dozens of avatars separately)

This has the advantage of:

• not having to figure out and maintain an API cal
• essentially preloading GitHub’s own requests

HTTP requests can be limited/staggered by triggering the requests a bit before they enter the viewport using IntersectionObserver with 1000px margin

[jef]

~Another solution to consider is to trigger GitHub’s requests (those that happen on hover)~

~I think this even has changed. I could be wrong, but doesn't seem to be making those calls anymore either. We'd have to explicitly call for all the separate types (issue/pr comments, issue/prs). Not too hard, but different.~

edit: You said this above, I missed that.

That being said, just for one comment:

• Using without content, it grabs up to 30 users. Seems to be the first 30.

• With content, same as before. Up to 30 users, probably the first 30.

I'm assuming the first 30 because of timestamp.

Not sure if this helps at all -- y'all probably already knew this.

...this feature is already relatively heavy HTTP-wise (it loads dozens of avatars separately)

~240ms response though with 30kb of data just for one issue comment that has 30+ reactions across the board. Luckily we have asynchronous :laughing: Still quite a bit of time though, you're right.

---

Looks like we can use GitHub's v4 #connections.

I think it might be best if we use limit here and limit it to 3 like we had in the previous implementation.

Working on a solution, we'll see if I can come up with something.

---

Did some sample queries with GraphQL. comments is limited to 100 and speed is not great. I'm think getting this information via v3 with asynchronous calls may be faster. Could be wrong though.

---

Looks pretty good so far. Updating the code right now to try and fit into what's currently there.

---

Okay, got a good start to the code. Going to finish tomorrow morning. Let me know if you think I'm going in the right direction so I don't waste too much time.

[fregante]

Neither solution is great, I’d very much prefer triggering GitHub’s own queries on hover than calling the API, as I mentioned in my comment.

This would require minimal changes to the current code:

+ trigger mouseenter
+ wait for attribute change
  read aria-label attribute
  etc

[jef]

Neither solution is great, I’d very much prefer triggering GitHub’s own queries on hover than calling the API, as I mentioned in my comment.

I thought this was broken, but it actually might be the browser. Not sure, but I do see that label getting updated.

Much better implementation.

First time looking at React/TypeScript. This was pretty cool. Thanks for insight.

[yakov116]

Looks like github went back to the old way!!

[fregante]

PR welcome to drop the first ~10 lines of showAvatarsOn