Fix infinite activities requests on profile

On a user's profile if you click the activities tab, scroll to the
bottom of the page, click the overview tab, and then scroll to the
bottom of the page there will be infinite API requests.

Changelog: fixed

app/assets/javascripts/pager.js

@@ -22,7 +22,10 @@ export default {
     this.prepareData = prepareData;
     this.successCallback = successCallback;
     this.errorCallback = errorCallback;
-    this.loading = $(`${container} .loading`).first();
+    this.$container = $(container);
+    this.$loading = this.$container.length
+      ? this.$container.find('.loading').first()
+      : $('.loading').first();
     if (preload) {
       this.offset = 0;
       this.getOld();
@@ -31,7 +34,7 @@ export default {
   },
 
   getOld() {
-    this.loading.show();
+    this.$loading.show();
     const url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
 
     axios
@@ -49,11 +52,11 @@ export default {
         if (!this.disable && !this.isScrollable()) {
           this.getOld();
         } else {
-          this.loading.hide();
+          this.$loading.hide();
         }
       })
       .catch((err) => this.errorCallback(err))
-      .finally(() => this.loading.hide());
+      .finally(() => this.$loading.hide());
   },
 
   append(count, html) {
@@ -83,8 +86,12 @@ export default {
       fireOnce: true,
       ceaseFire: () => this.disable === true,
       callback: () => {
-        if (!this.loading.is(':visible')) {
-          this.loading.show();
+        if (this.$container.length && !this.$container.is(':visible')) {
+          return;
+        }
+
+        if (!this.$loading.is(':visible')) {
+          this.$loading.show();
           this.getOld();
         }
       },

spec/frontend/pager_spec.js

@@ -68,34 +68,34 @@ describe('pager', () => {
     it('shows loader while loading next page', async () => {
       mockSuccess();
 
-      jest.spyOn(Pager.loading, 'show').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'show').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.show).toHaveBeenCalled();
+      expect(Pager.$loading.show).toHaveBeenCalled();
     });
 
     it('hides loader on success', async () => {
       mockSuccess();
 
-      jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'hide').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.hide).toHaveBeenCalled();
+      expect(Pager.$loading.hide).toHaveBeenCalled();
     });
 
     it('hides loader on error', async () => {
       mockError();
 
-      jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'hide').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.hide).toHaveBeenCalled();
+      expect(Pager.$loading.hide).toHaveBeenCalled();
     });
 
     it('sends request to url with offset and limit params', async () => {
@@ -122,12 +122,12 @@ describe('pager', () => {
       Pager.limit = 20;
 
       mockSuccess(1);
-      jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'hide').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.hide).toHaveBeenCalled();
+      expect(Pager.$loading.hide).toHaveBeenCalled();
       expect(Pager.disable).toBe(true);
     });
 
@@ -175,5 +175,46 @@ describe('pager', () => {
         expect(axios.get).toHaveBeenCalledWith(href, expect.any(Object));
       });
     });
+
+    describe('when `container` is passed', () => {
+      const href = '/some_list';
+      const container = '#js-pager';
+      let endlessScrollCallback;
+
+      beforeEach(() => {
+        jest.spyOn(axios, 'get');
+        jest.spyOn($.fn, 'endlessScroll').mockImplementation(({ callback }) => {
+          endlessScrollCallback = callback;
+        });
+      });
+
+      describe('when `container` is visible', () => {
+        it('makes API request', () => {
+          setFixtures(
+            `<div id="js-pager"><div class="content_list" data-href="${href}"></div></div>`,
+          );
+
+          Pager.init({ container });
+
+          endlessScrollCallback();
+
+          expect(axios.get).toHaveBeenCalledWith(href, expect.any(Object));
+        });
+      });
+
+      describe('when `container` is not visible', () => {
+        it('does not make API request', () => {
+          setFixtures(
+            `<div id="js-pager" style="display: none;"><div class="content_list" data-href="${href}"></div></div>`,
+          );
+
+          Pager.init({ container });
+
+          endlessScrollCallback();
+
+          expect(axios.get).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 });