Added progress bar to visits page when loading a lot of visits

src/index.scss

@@ -61,3 +61,7 @@ body,
     background-color: darken($mainColor, 12%);
   }
 }
+
+.progress-bar {
+  background-color: $mainColor;
+}

src/visits/VisitsStats.js

@@ -1,6 +1,6 @@
 import { isEmpty, propEq, values } from 'ramda';
 import React, { useState, useEffect, useMemo } from 'react';
-import { Button, Card, Collapse } from 'reactstrap';
+import { Button, Card, Collapse, Progress } from 'reactstrap';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -59,7 +59,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
       }
     };
 
-    const { visits, loading, loadingLarge, error } = visitsInfo;
+    const { visits, loading, loadingLarge, error, progress } = visitsInfo;
     const showTableControls = !loading && visits.length > 0;
     const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
     const { os, browsers, referrers, countries, cities, citiesForMap } = useMemo(
@@ -82,10 +82,17 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
     }, [ startDate, endDate ]);
 
     const renderVisitsContent = () => {
-      if (loading) {
-        const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...';
+      if (loadingLarge) {
+        return (
+          <Message loading>
+            This is going to take a while... :S
+            <Progress value={progress} striped={progress === 100} className="mt-3" />
+          </Message>
+        );
+      }
 
-        return <Message loading>{message}</Message>;
+      if (loading) {
+        return <Message loading />;
       }
 
       if (error) {

src/visits/reducers/common.js

@@ -1,7 +1,11 @@
 import { flatten, prop, range, splitEvery } from 'ramda';
 
 const ITEMS_PER_PAGE = 5000;
+const PARALLEL_REQUESTS_COUNT = 4;
+const PARALLEL_STARTING_PAGE = 2;
+
 const isLastPage = ({ currentPage, pagesCount }) => currentPage >= pagesCount;
+const calcProgress = (total, current) => current * 100 / total;
 
 export const getVisitsWithLoader = async (visitsLoader, extraFinishActionData, actionMap, dispatch, getState) => {
   dispatch({ type: actionMap.start });
@@ -15,12 +19,10 @@ export const getVisitsWithLoader = async (visitsLoader, extraFinishActionData, a
     }
 
     // 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);
+    const pagesRange = range(PARALLEL_STARTING_PAGE, pagination.pagesCount + 1);
+    const pagesBlocks = splitEvery(PARALLEL_REQUESTS_COUNT, pagesRange);
 
-    if (pagination.pagesCount - 1 > parallelRequestsCount) {
+    if (pagination.pagesCount - 1 > PARALLEL_REQUESTS_COUNT) {
       dispatch({ type: actionMap.large });
     }
 
@@ -36,6 +38,8 @@ export const getVisitsWithLoader = async (visitsLoader, extraFinishActionData, a
 
     const data = await loadVisitsInParallel(pagesBlocks[index]);
 
+    dispatch({ type: actionMap.progress, progress: calcProgress(pagesBlocks.length, index + PARALLEL_STARTING_PAGE) });
+
     if (index < pagesBlocks.length - 1) {
       return data.concat(await loadPagesBlocks(pagesBlocks, index + 1));
     }

src/visits/reducers/shortUrlVisits.js

@@ -11,6 +11,7 @@ export const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_V
 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';
 export const GET_SHORT_URL_VISITS_CANCEL = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_CANCEL';
+export const GET_SHORT_URL_VISITS_PROGRESS_CHANGED = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_PROGRESS_CHANGED';
 /* eslint-enable padding-line-between-statements */
 
 export const shortUrlVisitsType = PropTypes.shape({ // TODO Should extend from VisitInfoType
@@ -20,6 +21,7 @@ export const shortUrlVisitsType = PropTypes.shape({ // TODO Should extend from V
   loading: PropTypes.bool,
   loadingLarge: PropTypes.bool,
   error: PropTypes.bool,
+  progress: PropTypes.number,
 });
 
 const initialState = {
@@ -30,6 +32,7 @@ const initialState = {
   loadingLarge: false,
   error: false,
   cancelLoad: false,
+  progress: 0,
 };
 
 export default handleActions({
@@ -43,6 +46,7 @@ export default handleActions({
   }),
   [GET_SHORT_URL_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
   [GET_SHORT_URL_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
+  [GET_SHORT_URL_VISITS_PROGRESS_CHANGED]: (state, { progress }) => ({ ...state, progress }),
   [CREATE_VISIT]: (state, { shortUrl, visit }) => { // eslint-disable-line object-shorthand
     const { shortCode, domain, visits } = state;
 
@@ -63,6 +67,7 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query = {
     large: GET_SHORT_URL_VISITS_LARGE,
     finish: GET_SHORT_URL_VISITS,
     error: GET_SHORT_URL_VISITS_ERROR,
+    progress: GET_SHORT_URL_VISITS_PROGRESS_CHANGED,
   };
 
   return getVisitsWithLoader(visitsLoader, extraFinishActionData, actionMap, dispatch, getState);

src/visits/reducers/tagVisits.js

@@ -10,6 +10,7 @@ export const GET_TAG_VISITS_ERROR = 'shlink/tagVisits/GET_TAG_VISITS_ERROR';
 export const GET_TAG_VISITS = 'shlink/tagVisits/GET_TAG_VISITS';
 export const GET_TAG_VISITS_LARGE = 'shlink/tagVisits/GET_TAG_VISITS_LARGE';
 export const GET_TAG_VISITS_CANCEL = 'shlink/tagVisits/GET_TAG_VISITS_CANCEL';
+export const GET_TAG_VISITS_PROGRESS_CHANGED = 'shlink/tagVisits/GET_TAG_VISITS_PROGRESS_CHANGED';
 /* eslint-enable padding-line-between-statements */
 
 export const TagVisitsType = PropTypes.shape({ // TODO Should extend from VisitInfoType
@@ -18,6 +19,7 @@ export const TagVisitsType = PropTypes.shape({ // TODO Should extend from VisitI
   loading: PropTypes.bool,
   loadingLarge: PropTypes.bool,
   error: PropTypes.bool,
+  progress: PropTypes.number,
 });
 
 const initialState = {
@@ -27,6 +29,7 @@ const initialState = {
   loadingLarge: false,
   error: false,
   cancelLoad: false,
+  progress: 0,
 };
 
 export default handleActions({
@@ -35,6 +38,7 @@ export default handleActions({
   [GET_TAG_VISITS]: (state, { visits, tag }) => ({ ...initialState, visits, tag }),
   [GET_TAG_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
   [GET_TAG_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
+  [GET_TAG_VISITS_PROGRESS_CHANGED]: (state, { progress }) => ({ ...state, progress }),
   [CREATE_VISIT]: (state, { shortUrl, visit }) => { // eslint-disable-line object-shorthand
     const { tag, visits } = state;
 
@@ -55,6 +59,7 @@ export const getTagVisits = (buildShlinkApiClient) => (tag, query = {}) => (disp
     large: GET_TAG_VISITS_LARGE,
     finish: GET_TAG_VISITS,
     error: GET_TAG_VISITS_ERROR,
+    progress: GET_TAG_VISITS_PROGRESS_CHANGED,
   };
 
   return getVisitsWithLoader(visitsLoader, extraFinishActionData, actionMap, dispatch, getState);

src/visits/types/index.js

@@ -21,4 +21,5 @@ export const VisitsInfoType = PropTypes.shape({
   loading: PropTypes.bool,
   loadingLarge: PropTypes.bool,
   error: PropTypes.bool,
+  progress: PropTypes.number,
 });