Adds container to pager to enable scoping of loading indicator53023-endless-scroll-loader-is-visible-on-user-profile-overview-page

4 files changed, 21 insertions, 7 deletions

diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index de4566bb119..05de970e387 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -6,10 +6,12 @@ import Pager from './pager';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 
 export default class Activities {
-  constructor() {
-    Pager.init(20, true, false, data => data, this.updateTooltips);
+  constructor(container = '') {
+    this.container = container;
 
-    $('.event-filter-link').on('click', (e) => {
+    Pager.init(20, true, false, data => data, this.updateTooltips, this.container);
+
+    $('.event-filter-link').on('click', e => {
       e.preventDefault();
       this.toggleFilter(e.currentTarget);
       this.reloadActivities();
@@ -22,7 +24,7 @@ export default class Activities {
 
   reloadActivities() {
     $('.content_list').html('');
-    Pager.init(20, true, false, data => data, this.updateTooltips);
+    Pager.init(20, true, false, data => data, this.updateTooltips, this.container);
   }
 
   toggleFilter(sender) {
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 3b58c54b3f4..843f78c5fa9 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -7,14 +7,22 @@ const ENDLESS_SCROLL_BOTTOM_PX = 400;
 const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
 
 export default {
-  init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
+  init(
+    limit = 0,
+    preload = false,
+    disable = false,
+    prepareData = $.noop,
+    callback = $.noop,
+    container = '',
+  ) {
     this.url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
     this.limit = limit;
     this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
     this.disable = disable;
     this.prepareData = prepareData;
     this.callback = callback;
-    this.loading = $('.loading').first();
+    this.container = container;
+    this.loading = $(`${container} .loading`).first();
     if (preload) {
       this.offset = 0;
       this.getOld();
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 1de9945baad..04bcb16f036 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -170,7 +170,7 @@ export default class UserTabs {
     this.loadActivityCalendar('activity');
 
     // eslint-disable-next-line no-new
-    new Activities();
+    new Activities('#activity');
 
     this.loaded.activity = true;
   }
diff --git a/changelogs/unreleased/53023-endless-scroll-loader-is-visible-on-user-profile-overview-page.yml b/changelogs/unreleased/53023-endless-scroll-loader-is-visible-on-user-profile-overview-page.yml
new file mode 100644
index 00000000000..0377e10fe9e
--- /dev/null
+++ b/changelogs/unreleased/53023-endless-scroll-loader-is-visible-on-user-profile-overview-page.yml
@@ -0,0 +1,4 @@
+title: Adds container to pager to enable scoping
+merge_request: 22529
+? author
+type: other