WIP - POC for load more btn to start infinite scrolling

app/assets/javascripts/discourse/app/components/discovery-topics-list.js

@@ -1,20 +1,32 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import $ from "jquery";
 import LoadMore from "discourse/mixins/load-more";
 import UrlRefresh from "discourse/mixins/url-refresh";
 import { observes, on } from "discourse-common/utils/decorators";
 
+const _beforeLoadMoreCallbacks = [];
+export function addBeforeLoadMoreCallback(fn) {
+  _beforeLoadMoreCallbacks.push(fn);
+}
+export function resetBeforeLoadMoreCallbacks() {
+  _beforeLoadMoreCallbacks.clear();
+}
+
 export default Component.extend(UrlRefresh, LoadMore, {
   classNames: ["contents"],
   eyelineSelector: ".topic-list-item",
   documentTitle: service(),
+  appEvents: service(),
 
   @on("didInsertElement")
   _monitorTrackingState() {
     this.stateChangeCallbackId = this.topicTrackingState.onStateChange(() =>
       this._updateTrackingTopics()
     );
+
+    this.appEvents.on("discovery-topics-list:loadMore", this, "loadMore");
   },
 
   @on("willDestroyElement")
@@ -22,6 +34,8 @@ export default Component.extend(UrlRefresh, LoadMore, {
     if (this.stateChangeCallbackId) {
       this.topicTrackingState.offStateChange(this.stateChangeCallbackId);
     }
+
+    this.appEvents.off("discovery-topics-list:loadMore", this, "loadMore");
   },
 
   _updateTrackingTopics() {
@@ -33,25 +47,32 @@ export default Component.extend(UrlRefresh, LoadMore, {
     this.documentTitle.updateContextCount(this.incomingCount);
   },
 
-  actions: {
-    loadMore() {
-      this.documentTitle.updateContextCount(0);
-      this.model.loadMore().then(({ moreTopicsUrl, newTopics } = {}) => {
-        if (
-          newTopics &&
-          newTopics.length &&
-          this.autoAddTopicsToBulkSelect &&
-          this.bulkSelectEnabled
-        ) {
-          this.addTopicsToBulkSelect(newTopics);
-        }
-        if (moreTopicsUrl && $(window).height() >= $(document).height()) {
-          this.send("loadMore");
-        }
-        if (this.loadingComplete) {
-          this.loadingComplete();
-        }
-      });
-    },
+  @action
+  loadMore() {
+    if (
+      _beforeLoadMoreCallbacks.length &&
+      !_beforeLoadMoreCallbacks.some((fn) => fn(this))
+    ) {
+      // Return early if any callbacks return false, short-circuiting the default loading more logic
+      return;
+    }
+
+    this.documentTitle.updateContextCount(0);
+    this.model.loadMore().then(({ moreTopicsUrl, newTopics } = {}) => {
+      if (
+        newTopics &&
+        newTopics.length &&
+        this.autoAddTopicsToBulkSelect &&
+        this.bulkSelectEnabled
+      ) {
+        this.addTopicsToBulkSelect(newTopics);
+      }
+      if (moreTopicsUrl && $(window).height() >= $(document).height()) {
+        this.send("loadMore");
+      }
+      if (this.loadingComplete) {
+        this.loadingComplete();
+      }
+    });
   },
 });

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -7,6 +7,7 @@ import {
 } from "discourse/components/composer-editor";
 import { addPluginDocumentTitleCounter } from "discourse/components/d-document";
 import { addToolbarCallback } from "discourse/components/d-editor";
+import { addBeforeLoadMoreCallback } from "discourse/components/discovery-topics-list";
 import { addCategorySortCriteria } from "discourse/components/edit-category-settings";
 import { addGlobalNotice } from "discourse/components/global-notice";
 import { _addBulkButton } from "discourse/components/modal/topic-bulk-actions";
@@ -1700,6 +1701,10 @@ class PluginApi {
     addFeaturedLinkMetaDecorator(decorator);
   }
 
+  addBeforeLoadMoreCallback(fn) {
+    addBeforeLoadMoreCallback(fn);
+  }
+
   /**
    * Adds items to dropdown's in search-advanced-options.
    *

app/assets/javascripts/discourse/app/templates/discovery/topics.hbs

@@ -115,7 +115,7 @@
     <PluginOutlet
       @name="after-topic-list"
       @connectorTagName="div"
-      @outletArgs={{hash category=this.category}}
+      @outletArgs={{hash category=this.category topicList=this.model}}
     />
   </span>
 </DiscoveryTopicsList>