add requestingInterceptorMiddleware

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, new Date().getTime());
+ }
+
+ if (!action.error && isRequestType && isFinishedRequestType) {
+ const minimumDelay: number = 500;
+ const startRequestType: string = action.type.replace('_FINISHED', '');
+ const dateTimeStarted: number = actionTypeTimeStampMap.get(startRequestType) ?? new Date().getTime();
+
+ actionTypeTimeStampMap.delete(startRequestType);
+
+ const dateTimeNow: number = new Date().getTime();
+ const latency: number = dateTimeNow - dateTimeStarted;
+ 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));
+};