discourse/app/assets/javascripts/admin/addon/templates/logs
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
..
screened-emails.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
screened-ip-addresses.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
screened-urls.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
staff-action-logs.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00