usePreloaderInfo

[maiieul]

What is it about?

A hook that exposes real time preloader information, such as activeUserEventPreloadsCount, activePreloadsLength, etc.

What's the motivation for this proposal?

Problems you are trying to solve:

• Even for Qwik, the UX/UI can feel janky on very slow networks. While preloading is ongoing, if the user clicks on something, there can be long delays (e.g. 2-4s for components up to 10-20s for navigations on 3G throttling) and no visual feedback is given to the user to tell them that things are being downloaded.

Goals you are trying to achieve:

• Providing a fallback to MPA when SPA navigation is slow (MPA fallback for when SPA link navigation is too slow #304)
• On slow networks, showing custom loading UIs (spinners, skeletons, etc.) while components code is being preloaded (before the code is ready to execute).

It should be possible to do one without the other.

---

Proposed Solution / Feature

What do you propose?

A usePreloaderInfo hook provided by Qwik core.

Potential implementations

1. General info is achievable today

POC: QwikDev/qwik#8035
screen recording: https://github.com/user-attachments/assets/e4e47802-5f07-49dd-b5c8-91ba271b3e1b

The problem is it's not tied to a component and visible tasks are also counted as "activeUserEventPreloads":

• the fallbackToMpa implementation is cleaner
• there can only be a general spinner for when the network is too slow.

Note: it should be possible to differentiate visibleTasks QRLs from the rest, by assigning a probability of 0.98 to visibleTasks for example.

2. Granular info - ability to provide custom loading UIs with a activelyPreloadingBundlesCount tied to the component

For this we would need a way to know which QRLs correspond to which component.
Ideas:

• through a hash based on the origin component
• encoded in the bundle-graph
• maybe by analyzing the code with the optimizer and placing a corresponding hash accordingly.

The challenge with this would be that the custom loading UI would have to be preloaded first (maybe through ssrPreloads), delaying a little the chance of a user event bundle to have been preloaded already.

Code examples

  const { activeUserEventPreloadsCount, activePreloadsLength } = usePreloaderInfo();

or

  const { activelyPreloadingBundlesCount } = usePreloaderInfo();

---

Links / References

No response