Fix `hide-inactive-deployments` and "Load more..." detection (#2948)

1 files changed, 9 insertions, 3 deletions

diff --git a/source/libs/on-new-comments.ts b/source/libs/on-new-comments.ts
index 265ad867..3a6724aa 100644
--- a/source/libs/on-new-comments.ts
+++ b/source/libs/on-new-comments.ts
@@ -1,5 +1,5 @@
 import select from 'select-dom';
-import delegate, {DelegateSubscription} from 'delegate-it';
+import delegate, {DelegateSubscription, DelegateEvent} from 'delegate-it';
 
 const discussionsWithListeners = new WeakSet();
 const handlers = new Set<VoidFunction>();
@@ -11,6 +11,12 @@ function run(): void {
 	handlers.forEach(async callback => callback());
 }
 
+// The form is detached just before the `page:loaded` event is triggered so the event won’t bubble up and `delegate` won’t catch it.
+// This intermediate handler is required to catch the `page:loaded` event on the detached element.
+function paginationSubmitHandler({delegateTarget: form}: DelegateEvent): void {
+	form.addEventListener('page:loaded', run, {once: true});
+}
+
 function removeListeners(): void {
 	for (const subscription of delegates) {
 		subscription.destroy();
@@ -38,8 +44,8 @@ function addListeners(): void {
 		childList: true
 	});
 
-	// When hidden comments are loaded by clicking "Load more..."
-	delegates.add(delegate('.js-ajax-pagination', 'page:loaded', run));
+	// When hidden comments are loaded by clicking "Load more…"
+	delegates.add(delegate('.js-ajax-pagination', 'submit', paginationSubmitHandler));
 
 	// Outdated comment are loaded later using an include-fragment element
 	delegates.add(delegate('details.outdated-comment > include-fragment', 'load', run, true));