discourse/app/assets/javascripts/admin/addon/components/admin-config-areas
Kelv 7b062e24de
DEV: refactor load-more component to glimmer and use intersection observer (#32285)
This PR makes the following key changes to the load-more component:

* Updating to a Glimmer component
* Changing from an eyeline/scrolling-based mechanism to an
IntersectionObserver to determine when to load
* Keeping track of a single invisible sentinel element to help trigger
the loadMore action instead of having to find and track the last item of
the collection upon every load
* The component can now be used without wrapping around some content to
be yielded - the intent is to use this for cases like
[DiscoveryTopicsList](f0057c7353/app/assets/javascripts/discourse/app/components/discovery/topics.gjs (L222))
where we might want more precise placement of the sentinel element.
* Added utility toggle functions to control observer behaviour in this
class for testing

We will replace the load-more mixin in DiscoveryTopicsList in another
PR.



https://github.com/user-attachments/assets/50d9763f-b5f8-40f6-8630-41bdf107baf7


### Technical Considerations
1. Keeping track of a single sentinel element simplifies the logic
greatly and is also more robust to changes in the collection that's
being loaded. (ref: a [previous
commit](https://github.com/discourse/discourse/pull/32285/commits/2279519081eef9649864453c90d72dbb2bd8970c)
that was following the previous approach of tracking specifically the
last item of the loaded collection); this also sidesteps odd edge cases
like if the tracked element is larger than the entire viewport.
2. Using
[isIntersecting](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/isIntersecting)
instead of calculating manually whether the element is in the viewport
is also less flaky - I ran into issues with the boundingClientRect
inconsistently being calculated as outside the viewport on different
sized screens.
3. We need to properly bind `loadMore` functions with the action
decorator, otherwise the way we pass the loadMore callbacks through to
the observe-intersection modifier results in attempting to call it on
the loadMore component context instead. I've done this for all such
functions except for the one in
[`category-list`](0ed4b09527/app/assets/javascripts/discourse/app/models/category-list.js (L117))
which uses `@bind` that should be equivalent in terms of binding to the
correct `this`.
2025-04-28 10:22:35 +08:00
..
about.gjs UX: the ability to collapse AdminConfigAreaCard (#30310) 2024-12-17 11:47:23 +11:00
api-keys-list.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
api-keys-new.gjs DEV: Move admin only constants into admin bundle (#32141) 2025-04-03 14:28:36 +08:00
api-keys-show.gjs DEV: Convert admin API keys to conform to UI guidelines (#30660) 2025-01-09 10:57:40 +08:00
color-palette.gjs FIX: Rename branding to logo and fonts (#32264) 2025-04-14 10:49:47 +08:00
components.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
emojis-list.gjs DEV: add btn-default classes to buttons using default styling (#31039) 2025-01-28 15:40:34 -05:00
emojis-new.gjs DEV: Move admin config pages out of /customize/ sub-route (#30511) 2025-01-02 09:13:11 +10:00
flags.gjs DEV: Simplify "Admin Flags Page" system test to reduce runtime duration (#32431) 2025-04-24 15:47:22 +08:00
themes.gjs UX: Tweaks to the theme/component pages when using admin sidebar (#30953) 2025-03-13 15:34:17 +03:00
user-fields-list.gjs DEV: Consistent AdminConfigAreaEmptyList options (#29975) 2024-11-28 15:31:04 +10:00
webhooks-form.gjs FIX: better standalone checkbox support (#31130) 2025-02-04 09:58:00 +01:00
webhooks-list.gjs Admin webhooks UI guidelines (#30764) 2025-01-16 10:22:18 +08:00