Skip to content

Add IntersectionObserver utilities

Thomas Randolph requested to merge tor/maintenance/intersection-observer into master

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) 👆🏻 Is reverted due to the component modifying the UI
👉🏻 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 (on isIntersecting), and Disappear (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 .observe API rather than being required to use a <slot> to abstract the IntersectionObserver API.

Why

  1. 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")
  2. I believe it's unlikely that the wrapping elements that GlIntersectionObserver adds to the DOM tree will be removed, and even if they are, it might require a conversion to Vue 3
  3. There should be a central place to manage IntersectionObservers, even if it's minimal now.
  4. "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.

Edited by Thomas Randolph

Merge request reports