perf(wallet): prevent multiple concurrent page loads

renderer/reducers/activity/constants.js

@@ -9,6 +9,7 @@ export const FETCH_ACTIVITY_HISTORY_FAILURE = 'FETCH_ACTIVITY_HISTORY_FAILURE'
 export const SET_HAS_NEXT_PAGE = 'SET_HAS_NEXT_PAGE'
 export const ERROR_DETAILS_DIALOG_ID = 'ERROR_DETAILS_DIALOG_ID'
 export const SET_ERROR_DIALOG_DETAILS = 'SET_ERROR_DIALOG_DETAILS'
+export const SET_PAGE_LOADING = 'SET_PAGE_LOADING'
 
 export const defaultFilter = new Set([
   'SENT_ACTIVITY',

renderer/reducers/activity/reducer.js

@@ -13,7 +13,7 @@ import { fetchChannels } from 'reducers/channels'
 import { fetchInfo, infoSelectors } from 'reducers/info'
 import { showError, showNotification } from 'reducers/notification'
 import { createActivityPaginator, getItemType } from './utils'
-import { hasNextPage } from './selectors'
+import { hasNextPage, isPageLoading } from './selectors'
 import messages from './messages'
 import * as constants from './constants'
 
@@ -28,6 +28,7 @@ const {
   ADD_FILTER,
   SET_HAS_NEXT_PAGE,
   SET_ERROR_DIALOG_DETAILS,
+  SET_PAGE_LOADING,
 } = constants
 
 // ------------------------------------
@@ -44,6 +45,7 @@ const {
  * @property {boolean} isActivityLoading Boolean indicating if activity is loading.
  * @property {Error|null} activityLoadingError Error from loading activity.
  * @property {boolean} hasNextPage Boolean indicating if there are more activity pages to fetch.
+ * @property {boolean} isPageLoading Boolean indicating if the activity page is loading.
  */
 
 /** @type {State} */
@@ -65,6 +67,7 @@ const initialState = {
   isActivityLoading: false,
   activityLoadingError: null,
   hasNextPage: true,
+  isPageLoading: false,
 }
 
 // ------------------------------------
@@ -93,6 +96,19 @@ export const getPaginator = () => {
 // Actions
 // ------------------------------------
 
+/**
+ * setPageLoading - Set boolean indicating if page is in the process of loading.
+ *
+ * @param {boolean} isPageLoading Boolean indicating if page is loading
+ * @returns {object} Action
+ */
+export const setPageLoading = isPageLoading => {
+  return {
+    type: SET_PAGE_LOADING,
+    isPageLoading,
+  }
+}
+
 /**
  * setErorDialogDetails - Set the error dialog details.
  *
@@ -240,12 +256,19 @@ export const resetPaginator = () => () => {
  * @returns {(dispatch:Function, getState:Function) => Promise<void>} Thunk
  */
 export const loadPage = (reload = false) => async (dispatch, getState) => {
+  const state = getState()
+
+  if (isPageLoading(state)) {
+    return
+  }
+  dispatch(setPageLoading(true))
+
   await dispatch(fetchInfo())
-  const config = settingsSelectors.currentConfig(getState())
-  const blockHeight = infoSelectors.blockHeight(getState())
+  const config = settingsSelectors.currentConfig(state)
+  const blockHeight = infoSelectors.blockHeight(state)
   const thisPaginator = getPaginator()
 
-  if (reload || hasNextPage(getState())) {
+  if (reload || hasNextPage(state)) {
     const { pageSize } = config.activity
     const { items, hasNextPage: paginatorHasNextPage } = await thisPaginator(pageSize, blockHeight)
 
@@ -260,6 +283,8 @@ export const loadPage = (reload = false) => async (dispatch, getState) => {
     payments && dispatch(receivePayments(payments))
     transactions && dispatch(receiveTransactions(transactions))
   }
+
+  dispatch(setPageLoading(false))
 }
 
 /**
@@ -355,6 +380,9 @@ const ACTION_HANDLERS = {
   [SET_ERROR_DIALOG_DETAILS]: (state, { details }) => {
     state.errorDialogDetails = details
   },
+  [SET_PAGE_LOADING]: (state, { isPageLoading }) => {
+    state.isPageLoading = isPageLoading
+  },
 }
 
 export default createReducer(initialState, ACTION_HANDLERS)

renderer/reducers/activity/selectors.js

@@ -67,6 +67,14 @@ export const filter = state => state.activity.filter
  */
 export const hasNextPage = state => state.activity.hasNextPage
 
+/**
+ * isPageLoading - Activity page loading state.
+ *
+ * @param {State} state Redux state
+ * @returns {boolean} Boolean indicating if the activty pager is loading items.
+ */
+export const isPageLoading = state => state.activity.isPageLoading
+
 /**
  * filters - List of activity filters.
  *