Tag Tracking+ fetch optimization ideas

[marcustyphoon]

Is this worthwhile? Ehhhhh. At the very least, low priority unless we start hitting the API hard enough to cause problems with the current code.

Right now, with Tag Tracking+ active...

a) navigating to another Tumblr page (including using the buttons that the script itself adds to the sidebar, unless we manage to steal a soft navigate hook) fires number of tracked tags apifetches even if the last navigation was very recent and the data is still fresh
b) having multiple tumblr tabs open fires number of tabs apifetches every 30 seconds instead of one every 30 seconds
c) having a tumblr tab in the background that you never look at for a long period of time fires minutes * 2 apifetches that you never really see the result of

To optimize this, my proposal is to:

• implement onStorageChanged, I guess
• store an unreadCounts object with tag keys (for every tracked tag) and [unreadCountString, lastFetched] values under a new storage key (separate keys avoid race condition); read this in place of the unreadCounts Map
• implement a refreshAll(isFirstRun) function which:
  • if isFirstRun === false and any lastFetched is within the previous 30 seconds, return (fixes b)
  • if document.visibilityState === 'hidden', return (fixes c)
  • select every tracked tag whose lastFetched is older than isFirstRun ? 30s : numberOfTags * 30s; if none, select the oldest tag*
  • set selected tags' lastFetched values to now and fetch them all
  • update unreadCounts
• put refreshAll() on a 30s interval
• put it on onvisibilitychange too

This should ensure that hard refreshing gives relatively recent data (30 seconds) without unnecessary API requests, no data is more outdated than number of tracked tags * 30 seconds, and having a page in the background for a long period causes no additional api fetches but instantly freshens up the data when you tab back to it. And in the "normal" case this should still result in the 30 second cascading refresh behavior.

*actually, "select every tracked tag whose lastFetched is older than isFirstRun ? 30s : numberOfTags * 60s; if none, select the oldest tag if it's older than numberOfTags * 30s" mirrors the current behavior. Either way.

[AprilSylph]

unless we manage to steal a soft navigate hook

ah shit, I had a redpop branch ready to PR with that, and then I got drowned by like three simultaneous discussions and forgot

[AprilSylph]

it's not the real useNavigate() hook result, but it doesn't directly expose history.push. I'm still not super familiar with React Router so I'll let you and the Core Web team tell me if window.tumblr.navigate = (pathname: string) => history.push(pathname) would be dangerous in any capacity.

[marcustyphoon]

Does that actually work? Interesting. I was reading through the react router source trying to see if that would actually get picked up by the navigator and my tentative conclusion was no.

[AprilSylph]

It does! It even opens modals on top of the current page as expected. (I'll definitely be using this for Quote Replies.)

[AprilSylph]

window.history.push on the other hand... does not trigger navigation at all. HAVING FUN

[marcustyphoon]

Indeed it shouldn't! The first part of https://reactrouter.com/en/main/start/concepts is a great explainer on this; there's no event fired when you do that, so it couldn't be used for soft navigation, apparently.

[AprilSylph]

having multiple tumblr tabs open fires number of tabs apifetches every 30 seconds instead of one every 30 seconds

is this not already true for tumblr itself hitting /v2/user/counts? does it put that interval on hold when the tab is unfocused?

[AprilSylph]

if document.visibilityState === 'hidden', return (fixes c)

this would also 99% fix b, yes?

[marcustyphoon]

Depends if you use windows or tabs. Practically speaking I would certainly call it good enough, if the goal was to solve b.

[marcustyphoon]

re:redpop's fetch being paused, I don't know offhand; let me see if I can test it! I know at least one of the react query settings is set to refetch on focus (again) and that it updates a context and causes an expensive rerender (again), but I didn't check which request it actually does.

[marcustyphoon]

I have Tumblr in a background tab, document.visibilityState === 'hidden', and it is still fetching /v2/user/counts according to devtools. So redpop appears not to have an optimization like this either.