Pre-load tooltips so that "loading" isn't shown

[dsandber]

Is there any way to load the tooltips ahead of time so that "Loading" isn't shown before the tooltips load? I suppose a jquery function could be injected that pre-loads them, but is there a better way?

[humitos]

Hi @dsandber! 👋🏼

Is there any way to load the tooltips ahead of time so that "Loading" isn't shown before the tooltips load?

Pre-loading all the tooltips will download a lot of data that won't probably be used by the reader. So, I don't think that is a better UX than loading them on-demand and waiting a moment for it to load. That small waiting time is still better UX than clicking on the link and going to a completely new page.

I suppose a jquery function could be injected that pre-loads them, but is there a better way?

An interesting hacky approach could be to "detect the cursor is close enough to the tooltip link and pre-load it in that case". Sounds complex, tho.

I'm not particularly too interested in implementing a pre-loading as part of the core extension. I think it would be too complex to maintain and the benefits are not a lot 😞

[dsandber]

Preloading links is pretty common (in Ruby on Rails it's called turbolinks). If they're loaded in the background you're increasing total data sent/received but only improving the user experience. Makes sense for some applications.

Anyway, what should I look into if I want to do this myself? Ideally I could get a list of the hover references on a page, and then add some JS to load them when the page is opened.

[humitos]

Preloading links is pretty common (in Ruby on Rails it's called turbolinks). If they're loaded in the background you're increasing total data sent/received but only improving the user experience. Makes sense for some applications.

Interesting. Do you have some good documentation links that I can read more about this?

Anyway, what should I look into if I want to do this myself? Ideally I could get a list of the hover references on a page, and then add some JS to load them when the page is opened.

You can gran them all with the CSS selector .hoverxref.

[dsandber]

Wow, glad you made me go down this rabbit hole.

Looks like turbolinks is different than what I said. It's more about doing a substitution in the DOM than about pre-fetching:

https://thoughtbot.com/upcase/videos/turbolinks

Link prefetching is described here -- I didn't realise it was already part of HTML5:

https://en.wikipedia.org/wiki/Link_prefetching

more here:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

So seems the pre-fetching could be done as easily as adding a keyword to the generated HTML.

[dsandber]

Looks like the loaded data would have to be JSON to be cached though. Is that how the plugin works?

[dsandber]

For others reading this, it looks like it's pretty easy to add arbitrary JS code to sphinx generated documentation:

https://docs.readthedocs.io/en/stable/guides/adding-custom-css.html

So either pre-fetched links could be added to the document (not sure if this would work, since the links would be added after the document was loaded) or the pages could be explicitly loaded by iterating over .hoverxref.

[humitos]

Looks like the loaded data would have to be JSON to be cached though. Is that how the plugin works?

Yes. The API URLs are generated dynamically via Javascript and the response is a JSON. So, adding rel="prefetch" or similar won't work for the content loaded inside the tooltip.

Honestly, I don't think it worth the time and effort at this point. However, if you have a clear idea that does not make the code super complex, I'd be happy to take it a look in a PR.

[humitos]

From this StackOverflow answer, https://stackoverflow.com/questions/38593535/can-link-prefetch-be-used-to-cache-a-json-api-response-for-a-later-xhr-request, it could be possible to generate all the tooltips URLs for the current page and put them on <link> tags so they are prefetched.

[dsandber]

I'll post my code here if and when I get around to writing it. Will close for now.