add requestingInterceptorMiddleware

craco.config.js

@@ -2,12 +2,6 @@ const path = require('path');
 
 module.exports = function({ env, paths }) {
   return {
-    babel: {
-      presets: [],
-      plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
-      // loaderOptions: { /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */ },
-      // loaderOptions: (babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; }
-    },
     webpack: {
       alias: {
         environment: path.join(__dirname, 'src', 'environments', process.env.CLIENT_ENV),

package.json

@@ -44,12 +44,12 @@
   "dependencies": {
     "axios": "0.19.0",
     "classnames": "2.2.6",
-    "connected-react-router": "6.5.2",
+    "connected-react-router": "6.6.1",
     "dayjs": "1.8.17",
     "history": "4.10.1",
     "lodash.groupby": "4.6.0",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-redux": "7.1.3",
     "react-router-dom": "5.1.2",
     "redux": "4.0.4",
@@ -58,37 +58,35 @@
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
     "semantic-ui-css": "2.4.1",
-    "semantic-ui-react": "0.88.1",
+    "semantic-ui-react": "0.88.2",
     "sjs-base-model": "1.9.0",
     "uuid": "3.3.3"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.4.4",
-    "@babel/plugin-proposal-optional-chaining": "7.6.0",
-    "@craco/craco": "5.6.1",
+    "@craco/craco": "5.6.2",
     "@types/classnames": "2.2.9",
     "@types/history": "4.7.3",
-    "@types/jest": "24.0.22",
-    "@types/node": "12.12.7",
-    "@types/react": "16.9.11",
+    "@types/jest": "24.0.23",
+    "@types/node": "12.12.17",
+    "@types/react": "16.9.16",
     "@types/react-dom": "16.9.4",
     "@types/react-redux": "7.1.5",
-    "@types/react-router-dom": "5.1.2",
+    "@types/react-router-dom": "5.1.3",
     "@types/uuid": "3.4.6",
-    "@typescript-eslint/eslint-plugin": "2.7.0",
-    "@typescript-eslint/parser": "2.7.0",
+    "@typescript-eslint/eslint-plugin": "2.11.0",
+    "@typescript-eslint/parser": "2.11.0",
     "cross-env": "6.0.3",
-    "eslint": "6.6.0",
-    "eslint-config-prettier": "6.5.0",
+    "eslint": "6.7.2",
+    "eslint-config-prettier": "6.7.0",
     "eslint-plugin-prettier": "3.1.1",
-    "eslint-plugin-react": "7.16.0",
+    "eslint-plugin-react": "7.17.0",
     "generate-template-files": "2.2.0",
     "gh-pages": "2.1.1",
-    "husky": "3.0.9",
+    "husky": "3.1.0",
     "node-sass": "4.13.0",
     "prettier": "1.19.1",
     "pretty-quick": "2.0.1",
-    "react-scripts": "3.2.0",
-    "typescript": "3.7.2"
+    "react-scripts": "3.3.0",
+    "typescript": "3.7.3"
   }
 }

src/middlewares/requestingInterceptorMiddleware.ts

@@ -0,0 +1,39 @@
+import { Dispatch, Middleware, MiddlewareAPI } from 'redux';
+import IStore from '../models/IStore';
+import IAction from '../models/IAction';
+import { delay } from '../utilities/delay';
+
+const actionTypeTimeStampMap: Map<string, number> = new Map();
+
+const requestingInterceptorMiddleware: Middleware = (store: MiddlewareAPI<Dispatch, IStore>) => (next: Dispatch) => async (
+  action: IAction<any>
+): Promise<void> => {
+  const isRequestType: boolean = action.type.includes('REQUEST_');
+  const isFinishedRequestType: boolean = action.type.includes('_FINISHED');
+  const isStartRequestType: boolean = action.type.includes('REQUEST_') && !isFinishedRequestType;
+
+  if (isStartRequestType) {
+    actionTypeTimeStampMap.set(action.type, performance.now());
+  }
+
+  if (!action.error && isRequestType && isFinishedRequestType) {
+    const minimumDelay: number = 500;
+    const startRequestType: string = action.type.replace('_FINISHED', '');
+    const timeNow: number = performance.now();
+    const timeStarted: number = actionTypeTimeStampMap.get(startRequestType) ?? timeNow;
+
+    actionTypeTimeStampMap.delete(startRequestType);
+
+    const latency: number = timeNow - timeStarted;
+    const remainder: number = minimumDelay - latency;
+    const shouldDelayResponse: boolean = latency < minimumDelay;
+
+    if (shouldDelayResponse) {
+      await delay(remainder);
+    }
+  }
+
+  next(action);
+};
+
+export default requestingInterceptorMiddleware;

src/stores/rootStore.ts

@@ -8,11 +8,16 @@ import environment from 'environment';
 import rootReducer from './rootReducer';
 import IStore from '../models/IStore';
 import errorToastMiddleware from '../middlewares/errorToastMiddleware';
+import requestingInterceptorMiddleware from '../middlewares/requestingInterceptorMiddleware';
 
 export default (initialState: Partial<IStore>, history: History): Store<IStore> => {
-  const middleware: Middleware[] = [environment.isDevelopment ? reduxFreeze : null!, thunk, routerMiddleware(history), errorToastMiddleware()].filter(
-    Boolean
-  );
+  const middleware: Middleware[] = [
+    environment.isDevelopment ? reduxFreeze : null!,
+    thunk,
+    routerMiddleware(history),
+    requestingInterceptorMiddleware,
+    errorToastMiddleware(),
+  ].filter(Boolean);
 
   const store: Store<IStore> = createStore(rootReducer(history), initialState, composeWithDevTools(applyMiddleware(...middleware)));
 

src/utilities/HttpUtility.ts

@@ -76,7 +76,7 @@ export default class HttpUtility {
           ...config?.headers,
         },
       };
-      const [axiosResponse] = await Promise.all([axios(axiosRequestConfig), HttpUtility._delay()]);
+      const axiosResponse = await axios(axiosRequestConfig);
 
       const { status, data, request } = axiosResponse;
 
@@ -156,17 +156,4 @@ export default class HttpUtility {
 
     return model;
   }
-
-  /**
-   * We want to show the loading indicator to the user but sometimes the api
-   * request finished too quickly. This makes sure there the loading indicator is
-   * visual for at least a given time.
-   *
-   * @param duration
-   * @returns {Promise<unknown>}
-   * @private
-   */
-  private static _delay(duration: number = 250): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, duration));
-  }
 }

src/utilities/delay.ts

@@ -0,0 +1,3 @@
+export const delay = (duration: number = 250): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, duration));
+};