discourse/app/assets/javascripts/admin/addon/templates
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
..
admin-badges DEV: Add Settings tab to admin Badges page (#32251) 2025-04-21 09:41:29 +08:00
api-keys DEV: Move User API admin settings into API keys page (#32232) 2025-04-10 10:40:25 +08:00
logs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
admin-badges.gjs DEV: Add Settings tab to admin Badges page (#32251) 2025-04-21 09:41:29 +08:00
admin-groups-index.gjs DEV: Add dedicated admin groups page (#32377) 2025-04-22 11:23:25 +08:00
admin-groups-settings.gjs DEV: Add dedicated admin groups page (#32377) 2025-04-22 11:23:25 +08:00
admin-groups.gjs DEV: Add dedicated admin groups page (#32377) 2025-04-22 11:23:25 +08:00
admin.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
analytics-settings.gjs DEV: Add Analytics and SEO admin config page (#32190) 2025-04-07 16:15:37 +08:00
api-keys.gjs DEV: Move User API admin settings into API keys page (#32232) 2025-04-10 10:40:25 +08:00
backups-index.gjs FIX: hide unnecessary tabs and buttons when backups disabled (#32396) 2025-04-23 10:22:31 +08:00
backups-logs.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
backups-settings.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
backups.gjs FIX: hide unnecessary tabs and buttons when backups disabled (#32396) 2025-04-23 10:22:31 +08:00
config-about.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-color-palettes-show.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-content-categories-and-tags.gjs DEV: Add Content admin config page (#32194) 2025-04-10 11:20:22 +08:00
config-content-posts-and-topics.gjs DEV: Add Content admin config page (#32194) 2025-04-10 11:20:22 +08:00
config-content-sharing.gjs DEV: Add Content admin config page (#32194) 2025-04-10 11:20:22 +08:00
config-content-stats-and-thresholds.gjs DEV: Add Content admin config page (#32194) 2025-04-10 11:20:22 +08:00
config-content.gjs DEV: Add Content admin config page (#32194) 2025-04-10 11:20:22 +08:00
config-customize-components.gjs FEATURE: Introduce new components listing page (#32164) 2025-04-08 17:58:29 +03:00
config-customize-themes.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-customize.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-developer-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-experimental-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-files-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-flags-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-flags-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-flags-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-flags-settings.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
config-flags.gjs DEV: More linting fix (#32435) 2025-04-24 16:30:13 +08:00
config-group-permissions-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-interface-settings.gjs DEV: Add Interface and layout admin config page (#32197) 2025-04-08 09:22:10 +08:00
config-legal-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-localization-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-login-and-authentication-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-logo-and-fonts.gjs FIX: Rename branding to logo and fonts (#32264) 2025-04-14 10:49:47 +08:00
config-navigation-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-notifications-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-onebox-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-rate-limits-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-search-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-security-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-site-admin-settings.gjs DEV: Add Site admin admin config page (#32196) 2025-04-08 09:52:42 +08:00
config-spam-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-trust-levels-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-user-api-settings.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
config-user-defaults-settings.gjs DEV: Add User defaults admin config page (#32195) 2025-04-08 09:21:54 +08:00
customize-colors-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-colors-show.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-colors.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-email-style-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-email-style.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-form-templates-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-form-templates-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-form-templates-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-robots-txt.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-themes-edit.gjs UX: make admin code editor height more flexible (#32241) 2025-04-09 16:20:48 -04:00
customize-themes-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-themes-show-schema.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
customize-themes-show.gjs FIX: flaky admin_customize_themes_spec (#32169) 2025-04-07 10:39:21 +08:00
customize-themes.gjs DEV: [gjs-codemod] apply codemod 2025-04-02 13:44:15 +01:00
customize.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
dashboard-new-features.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
dashboard.gjs UX: Admin Dashboard title (#32022) 2025-03-27 13:57:56 -06:00
dashboard_general.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
dashboard_moderation.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
dashboard_reports.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
dashboard_security.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
email-advanced-test.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
email-logs-bounced.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
email-logs-received.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
email-logs-rejected.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
email-logs-sent.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
email-logs-skipped.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
email-logs.gjs DEV: Extract e-mail logs into their own admin page (#32211) 2025-04-08 17:50:12 +08:00
email-preview-digest.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
email-server-settings.gjs DEV: Add e-mail site settings to e-mail admin page (#32214) 2025-04-08 18:59:50 +08:00
email-settings.gjs DEV: Add e-mail site settings to e-mail admin page (#32214) 2025-04-08 18:59:50 +08:00
email-templates-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
email-templates.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
email.gjs DEV: Add e-mail site settings to e-mail admin page (#32214) 2025-04-08 18:59:50 +08:00
embedding-crawlers.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
embedding-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
embedding-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
embedding-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
embedding-posts-and-topics.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
embedding-settings.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
embedding.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
emojis-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
emojis-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
emojis-settings.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
emojis.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
logs.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
permalinks-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
permalinks-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
permalinks-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
permalinks-settings.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
permalinks.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
plugins-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
plugins-show-settings.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
plugins-show.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
plugins.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
reports-dashboard-settings.gjs DEV: Add Dashboard settings tab to Reports page (#32235) 2025-04-10 10:41:12 +08:00
reports-index.gjs DEV: Add Dashboard settings tab to Reports page (#32235) 2025-04-10 10:41:12 +08:00
reports-show.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
reports.gjs DEV: Add Dashboard settings tab to Reports page (#32235) 2025-04-10 10:41:12 +08:00
search-index.gjs FIX: Admin search page shortcut (#32140) 2025-04-03 16:06:00 +10:00
search-logs-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
search-logs-term.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
section-account.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
site-settings-category.gjs FEATURE: fonts section for branding page (#32031) 2025-04-07 10:28:42 +08:00
site-settings.gjs FEATURE: Bulk save site settings (#32013) 2025-04-01 09:39:19 +08:00
site-text-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
site-text-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
site-text.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user-badges.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user-fields-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user-fields-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user-fields-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user-fields.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user-index.gjs DEV: [gjs-codemod] apply codemod 2025-04-02 13:44:15 +01:00
user-tl3-requirements.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
user.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
users-list-show.gjs DEV: refactor load-more component to glimmer and use intersection observer (#32285) 2025-04-28 10:22:35 +08:00
users-settings.gjs DEV: Add Settings tab to admin Users page (#32255) 2025-04-11 11:10:53 +08:00
users.gjs DEV: Add Settings tab to admin Users page (#32255) 2025-04-11 11:10:53 +08:00
watched-words-action.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
watched-words.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
web-hooks-edit.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
web-hooks-index.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
web-hooks-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
web-hooks-show.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00
web-hooks.gjs DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
whats-new.gjs DEV: [gjs-codemod] convert admin files to gjs 2025-03-25 16:59:21 +00:00