1 files changed, 28 insertions, 5 deletions

diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index 5064d9ee2d2..b671d038ce8 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -2,14 +2,20 @@
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import Pager from './pager';
 
 export default class Activities {
-  constructor(container = '') {
-    this.container = container;
+  constructor(containerSelector = '') {
+    this.containerSelector = containerSelector;
+    this.containerEl = this.containerSelector
+      ? document.querySelector(this.containerSelector)
+      : undefined;
+    this.$contentList = $('.content_list');
 
-    Pager.init(20, true, false, (data) => data, this.updateTooltips, this.container);
+    this.loadActivities();
 
     $('.event-filter-link').on('click', (e) => {
       e.preventDefault();
@@ -18,13 +24,30 @@ export default class Activities {
     });
   }
 
+  loadActivities() {
+    Pager.init({
+      limit: 20,
+      preload: true,
+      prepareData: (data) => data,
+      successCallback: () => this.updateTooltips(),
+      errorCallback: () =>
+        createFlash({
+          message: s__(
+            'Activity|An error occured while retrieving activity. Reload the page to try again.',
+          ),
+          parent: this.containerEl,
+        }),
+      container: this.containerSelector,
+    });
+  }
+
   updateTooltips() {
     localTimeAgo($('.js-timeago', '.content_list'));
   }
 
   reloadActivities() {
-    $('.content_list').html('');
-    Pager.init(20, true, false, (data) => data, this.updateTooltips, this.container);
+    this.$contentList.html('');
+    this.loadActivities();
   }
 
   toggleFilter(sender) {