Preload priority

[GrandSchtroumpf]

What is it about?

Change preload priority element dependencies on hover & when it enters the viewport

What's the motivation for this proposal?

Problems you are trying to solve:

On 3G network, when there are too many bundles to preload, first interaction might happens before the associated bundle is loaded.

Goals you are trying to achieve:

Prioritize actionable items that are in the viewport.

Any other context or information you want to share:

---

Proposed Solution / Feature

What do you propose?

Change priority of a preload when element enters the viewport, makes it higher if user hover over the element.

Code examples

Here we fetch all elements with onClick$ callback, and change the priority depending if it's hovered or entrering the viewport.
The main drawback with this solution is that it'll only work for element rendered in the server. Which I think is fine in the context of preloading.

useOnDocument('qidle', $(() => {
  const els = document.querySelectorAll('[on:click]');
  
  const observer = new IntersectionObserver(entries => {
    for (const entry of entries) {
      if (entry.intersectionRatio >= 0.1) {
        preload(entry.target.getAttribute('on:click'), 0.9);
        observer.unobserve(entry.target);
      }
    }
  })
  
  for (const el of els) {
    observer.observe(el);
    el.addEventListener('mouseover', () => {
      preload(el.getAttribute('on:click'), 1)
    }, { once: true });
  }
  
}))

The issue with the code above is that it is a QRL itself because of preload. An alternative would be, in prealoder, to listen on event:

useOnDocument('qidle', sync$(() => {
  const els = document.querySelectorAll('[on:click]');
  const preload = (url, priority) => window.emitEvent(new CustomEvent({ detail: { url, priority } }));
  
  const observer = new IntersectionObserver(entries => {
    for (const entry of entries) {
      if (entry.intersectionRatio >= 0.1) {
        preload(entry.target.getAttribute('on:click'), 0.9);
        observer.unobserve(entry.target);
      }
    }
  })
  
  for (const el of els) {
    observer.observe(el);
    el.addEventListener('mouseover', () => {
      preload(el.getAttribute('on:click'), 1)
    }, { once: true });
  }
  
}))

Now we can use sync$ to inline this code.

Links / References

No response

[wmertens]

Actually, I think we should be setting it up in preloader directly. The qwikloader would just be an extra step for nothing.

For CSR it will already be preloading the QRLs, no issue there.

It should also use listen for touchstart (higher prio) and focusin (keyboard focus, lower prio).

Do note that the preloader doesn't understand QRL serialization, so that will have to be added.

NOTE

In v2, the handler QRLs are mostly _run and _task, and they refer to a QRL in state. It doesn't mean that the QRL has to be constructed, the preloader can just read the state itself and retrieve the chunk directly without waking up core.

[wmertens]

We discussed this and looks like a good idea to do in the preloader