Ensured requests when loading visits are made in parallel for big dataset

src/visits/ShortUrlVisits.js

@@ -53,10 +53,12 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
     const { shortUrlVisits, shortUrlDetail } = this.props;
 
     const renderVisitsContent = () => {
-      const { visits, loading, error } = shortUrlVisits;
+      const { visits, loading, loadingLarge, error } = shortUrlVisits;
 
       if (loading) {
-        return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
+        const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...';
+
+        return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> {message}</MutedMessage>;
       }
 
       if (error) {

src/visits/reducers/shortUrlVisits.js

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
+import { flatten, range, splitEvery } from 'ramda';
 
 /* eslint-disable padding-line-between-statements, newline-after-var */
 export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
 export const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
 export const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
+export const GET_SHORT_URL_VISITS_LARGE = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_LARGE';
 /* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const shortUrlVisitsType = PropTypes.shape({
@@ -15,6 +17,7 @@ export const shortUrlVisitsType = PropTypes.shape({
 const initialState = {
   visits: [],
   loading: false,
+  loadingLarge: false,
   error: false,
 };
 
@@ -24,19 +27,27 @@ export default function reducer(state = initialState, action) {
       return {
         ...state,
         loading: true,
+        loadingLarge: false,
       };
     case GET_SHORT_URL_VISITS_ERROR:
       return {
         ...state,
         loading: false,
+        loadingLarge: false,
         error: true,
       };
     case GET_SHORT_URL_VISITS:
       return {
         visits: action.visits,
         loading: false,
+        loadingLarge: false,
         error: false,
       };
+    case GET_SHORT_URL_VISITS_LARGE:
+      return {
+        ...state,
+        loadingLarge: true,
+      };
     default:
       return state;
   }
@@ -58,9 +69,36 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
       return data;
     }
 
-    return data.concat(await loadVisits(page + 1));
+    // If there are more pages, make requests in blocks of 4
+    const parallelRequestsCount = 4;
+    const parallelStartingPage = 2;
+    const pagesRange = range(parallelStartingPage, pagination.pagesCount + 1);
+    const pagesBlocks = splitEvery(parallelRequestsCount, pagesRange);
+
+    if (pagination.pagesCount - 1 > parallelRequestsCount) {
+      dispatch({ type: GET_SHORT_URL_VISITS_LARGE });
+    }
+
+    return data.concat(await loadPagesBlocks(pagesBlocks));
   };
 
+  const loadPagesBlocks = async (pagesBlocks, index = 0) => {
+    const data = await loadVisitsInParallel(pagesBlocks[index]);
+
+    if (index < pagesBlocks.length - 1) {
+      return data.concat(await loadPagesBlocks(pagesBlocks, index + 1));
+    }
+
+    return data;
+  };
+
+  const loadVisitsInParallel = (pages) =>
+    Promise.all(pages.map(async (page) => {
+      const { data } = await getShortUrlVisits(shortCode, { ...dates, page, itemsPerPage });
+
+      return data;
+    })).then(flatten);
+
   try {
     const visits = await loadVisits();
 

test/visits/ShortUrlVisits.test.js

@@ -43,7 +43,7 @@ describe('<ShortUrlVisits />', () => {
     }
   });
 
-  it('Renders a preloader when visits are loading', () => {
+  it('renders a preloader when visits are loading', () => {
     const wrapper = createComponent({ loading: true });
     const loadingMessage = wrapper.find(MutedMessage);
 
@@ -51,6 +51,14 @@ describe('<ShortUrlVisits />', () => {
     expect(loadingMessage.html()).toContain('Loading...');
   });
 
+  it('renders a warning when loading large amounts of visits', () => {
+    const wrapper = createComponent({ loading: true, loadingLarge: true });
+    const loadingMessage = wrapper.find(MutedMessage);
+
+    expect(loadingMessage).toHaveLength(1);
+    expect(loadingMessage.html()).toContain('This is going to take a while... :S');
+  });
+
   it('renders an error message when visits could not be loaded', () => {
     const wrapper = createComponent({ loading: false, error: true });
     const errorMessage = wrapper.find(Card);

test/visits/reducers/shortUrlVisits.test.js

@@ -4,6 +4,7 @@ import reducer, {
   GET_SHORT_URL_VISITS_START,
   GET_SHORT_URL_VISITS_ERROR,
   GET_SHORT_URL_VISITS,
+  GET_SHORT_URL_VISITS_LARGE,
 } from '../../../src/visits/reducers/shortUrlVisits';
 
 describe('shortUrlVisitsReducer', () => {
@@ -15,6 +16,13 @@ describe('shortUrlVisitsReducer', () => {
       expect(loading).toEqual(true);
     });
 
+    it('returns loadingLarge on GET_SHORT_URL_VISITS_LARGE', () => {
+      const state = reducer({ loadingLarge: false }, { type: GET_SHORT_URL_VISITS_LARGE });
+      const { loadingLarge } = state;
+
+      expect(loadingLarge).toEqual(true);
+    });
+
     it('stops loading and returns error on GET_SHORT_URL_VISITS_ERROR', () => {
       const state = reducer({ loading: true, error: false }, { type: GET_SHORT_URL_VISITS_ERROR });
       const { loading, error } = state;