Add IntersectionObserver utilities
What does this MR do and why?
The recommended way to use IntersectionObservers is to use the gitlab-ui GlIntersectionObserver component.
However, User Interface components render interface elements, and this is essentially unworkable when using normally-inert tools like IntersectionObserver.
Timeline
| MR | Description |
|---|---|
| !71508 (merged) | Uses GlIntersectionObserver to implement visibility-based progress tracking |
| !74948 (merged) |
|
This MR, which adds a programmatic-only utility for IntersectionObservers |
|
| !75068 (closed) | Re-enabling of the visibility-based progress tracking |
Additions
This MR adds a small utility wrapper around IntersectionObserver which creates observers in a similar way to GlIntersectionObserver, but without modifying the DOM tree (and thus breaking the application despite being a read-only / reactive set of logic).
What matches
The new utility still:
- memoizes the input so that identical Observers are not duplicated
- emits three events:
Update(always),Appear(onisIntersecting), andDisappear(on!isIntersecting).
What doesn't match
- This is plain JS and browser APIs.
- The event names are a little different
- Consumers can continually reuse the same Observer by calling the
.observeAPI rather than being required to use a<slot>to abstract theIntersectionObserverAPI.
Why
- Logic-based utilities (i.e. "back-of-the-front-end") do not belong in an interface component library (i.e. "front-of-the-front-end")
- I believe it's unlikely that the wrapping elements that
GlIntersectionObserveradds to the DOM tree will be removed, and even if they are, it might require a conversion to Vue 3 - There should be a central place to manage
IntersectionObservers, even if it's minimal now. - "Data down, Events up" is the web-standard way of writing components.
Screenshots or screen recordings
This is all utility work, with no UI.
How to set up and validate locally
There is no UI to validate locally, but if you're familiar with IntersectionObservers, you can use import { create } from '~/lib/utils/intersection_observers'; to create one and see that it works as advertised.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.