1 files changed, 24 insertions, 5 deletions
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 39fd9fdf625..79bc9932438 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -1,17 +1,36 @@
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import Poll from '~/lib/utils/poll';
 import axios from '~/lib/utils/axios_utils';
+import Visibility from 'visibilityjs';
 import flash from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 
 export const fetchClusters = ({ state, commit }) => {
-  return axios
-    .get(state.endpoint)
-    .then(({ data }) => {
+  const poll = new Poll({
+    resource: {
+      fetchClusters: endpoint => axios.get(endpoint),
+    },
+    data: state.endpoint,
+    method: 'fetchClusters',
+    successCallback: ({ data }) => {
       commit(types.SET_CLUSTERS_DATA, convertObjectPropsToCamelCase(data, { deep: true }));
       commit(types.SET_LOADING_STATE, false);
-    })
-    .catch(() => flash(__('An error occurred while loading clusters')));
+    },
+    errorCallback: () => flash(__('An error occurred while loading clusters')),
+  });
+
+  if (!Visibility.hidden()) {
+    poll.makeRequest();
+  }
+
+  Visibility.change(() => {
+    if (!Visibility.hidden()) {
+      poll.restart();
+    } else {
+      poll.stop();
+    }
+  });
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests