Add the progressDelay task start option

src/client/components/Task/RecentResult.js

@@ -0,0 +1,28 @@
+import { TASK__START } from '../../actions'
+import multiinstance from '../../utils/multiinstance'
+
+export default multiinstance({
+  name: 'Task/RecentResult',
+  actionPattern: /.*/,
+  idProp: 'name',
+  reducer: (state, { type, id, onSuccessDispatch, result }) => {
+    switch (type) {
+      case TASK__START:
+        return {
+          ...state,
+          [id]: {
+            ...state?.[id],
+            successActionType: onSuccessDispatch,
+          },
+        }
+      case state?.[id]?.successActionType:
+        return {
+          ...state,
+          [id]: { result },
+        }
+      default:
+        return state
+    }
+  },
+  component: ({ children, id, ...props }) => children(props[id]?.result),
+})

src/client/components/Task/index.jsx

@@ -15,6 +15,8 @@ import Err from './Error'
 import ProgressIndicator from '../ProgressIndicator'
 import AccessDenied from '../AccessDenied'
 
+const DEFAULT_PROGRESS_DELAY = 100
+
 const StyledLoadingBox = styled(LoadingBox)({
   paddingBottom: 0,
 })
@@ -45,6 +47,10 @@ const startOnRenderPropTypes = {
  * result of a _tasks_ success. If set, a {SuccessAction} with this value
  * as its `type` will be dispatched when the _task_ succeeds, but before the
  * _task_ is _cleared_.
+ * @property {number} [progressDelay=100] - The duration in milliseconds
+ * for which switching a task to a progress state should be delayed.
+ * This is to avoid showing the progress indicator for tasks which resolve
+ * immediately.
  */
 
 /**
@@ -122,13 +128,18 @@ const startOnRenderPropTypes = {
 const Task = connect(
   (state) => state.tasks,
   (dispatch) => ({
-    start: (name, id, { payload, onSuccessDispatch }) =>
+    start: (
+      name,
+      id,
+      { payload, onSuccessDispatch, progressDelay = DEFAULT_PROGRESS_DELAY }
+    ) =>
       dispatch({
         type: TASK__START,
         payload,
         id,
         name,
         onSuccessDispatch,
+        progressDelay,
       }),
     cancel: (name, id) =>
       dispatch({
@@ -174,11 +185,13 @@ Task.propTypes = {
  * @example
  * <Task.StartOnRender name="foo" id="a" payload={123} onSuccessDispatch="FOO"/>
  */
+// TODO: Re-implement with <Task/>
 Task.StartOnRender = connect(
   (state, { name, id }) => get(state, ['tasks', name, id], {}),
   (dispatch, { id, name }) => ({
     start: (options) =>
       dispatch({
+        progressDelay: DEFAULT_PROGRESS_DELAY,
         ...options,
         type: TASK__START,
         id,

src/client/components/Task/saga.js

@@ -7,6 +7,7 @@ import {
   call,
   select,
   cancel,
+  delay,
 } from 'redux-saga/effects'
 
 import {
@@ -18,15 +19,22 @@ import {
   TASK__CANCEL,
 } from '../../actions'
 
+function* switchToProgressAfterDelay(action) {
+  yield delay(action.progressDelay || 0)
+  yield put({ ...action, type: TASK__PROGRESS })
+}
+
 /**
  * Starts a task and waits for its resolution or rejection
  * @param {Task} task - the task function
  * @param {TaskStartAction} action - the `TASK__START` action
  */
 function* startTask(task, action) {
-  yield put({ ...action, type: TASK__PROGRESS })
+  const progressDelayProcess = yield fork(switchToProgressAfterDelay, action)
+
   try {
     const result = yield call(task, action.payload, action.id)
+    yield cancel(progressDelayProcess)
     const { id, name, payload, onSuccessDispatch } = action
     if (onSuccessDispatch) {
       yield put({

src/client/reducers.js

@@ -190,6 +190,8 @@ import companyActivityReducerNoAs from './modules/Companies/CompanyActivity/redu
 
 import { ResendExportWin } from './modules/ExportWins/Form/ResendExportWin'
 
+import RecentTaskResult from './components/Task/RecentResult'
+
 export const reducers = {
   tasks,
   [FLASH_MESSAGE_ID]: flashMessageReducer,
@@ -211,6 +213,7 @@ export const reducers = {
   ...Form.reducerSpread,
   ...FieldAddAnother.reducerSpread,
   ...ResendExportWin.reducerSpread,
+  ...RecentTaskResult.reducerSpread,
   [DNB_CHECK_ID]: dnbCheckReducer,
   [INVESTMENT_OPPORTUNITIES_LIST_ID]: investmentOpportunitiesListReducer,
   [INVESTMENT_OPPORTUNITIES_DETAILS_ID]: investmentOpportunitiesDetailsReducer,

test/component/cypress/specs/Task/RecentResult.cy.jsx

@@ -0,0 +1,108 @@
+/* eslint-disable prettier/prettier */
+import React from 'react'
+
+import RecentResult from "../../../../../src/client/components/Task/RecentResult"
+import Task from "../../../../../src/client/components/Task"
+
+describe('Task/RecentResult', () => {
+  it('Should provide most recent result of a given task', () => {
+    const TASK_CALLS = [
+      {
+        name: 'double',
+        id: 'aaa',
+        payload: 1,
+        expectedResult: 2,
+      },
+      {
+        name: 'double',
+        id: 'bbb',
+        payload: 3,
+        expectedResult: 6,
+      },
+      {
+        name: 'plusMillion',
+        id: 'aaa',
+        payload: 1,
+        expectedResult: 1_000_001,
+      },
+      {
+        name: 'double',
+        id: 'aaa',
+        payload: 10,
+        expectedResult: 20,
+      },
+      {
+        name: 'plusMillion',
+        id: 'bbb',
+        payload: 111,
+        expectedResult: 1_000_111,
+      },
+      {
+        name: 'double',
+        id: 'bbb',
+        payload: 444,
+        expectedResult: 888,
+      },
+      {
+        name: 'plusMillion',
+        id: 'aaa',
+        payload: 222,
+        expectedResult: 1_000_222,
+      },
+    ]
+
+    const TASKS = TASK_CALLS.reduce((a, {name, id}) => ({
+      ...a,
+      [`${name}-${id}`]: {name, id},
+    }), {})
+
+    cy.mountWithProvider(
+      <>
+        <Task>
+          {t =>
+            // A utility to start tasks
+            <form onSubmit={(e) => {
+              e.preventDefault()
+              t(e.target.taskName.value, e.target.taskId.value).start({
+                payload: parseInt(e.target.payload.value, 10),
+                onSuccessDispatch: `ACTION_NAME-${Math.random()}`,
+              })
+            }}>
+              <input name="taskName" placeholder="name"/>
+              <input name="taskId" placeholder="id"/>
+              <input name="payload" placeholder="payload"/>
+              <button>
+                Start task
+              </button>
+            </form>
+          }
+        </Task>
+        {/* Render most recent result of each task */}
+        <ul>
+          {Object.entries(TASKS).map(([key, {name, id}]) =>
+            <li key={key}>
+              {key}:{' '}
+              <RecentResult name={name} id={id}>
+                {result => <span id={`result-${key}`}>{result || 'nothing'}</span>}
+              </RecentResult>
+            </li>
+          )}
+        </ul>
+      </>,
+      {
+        tasks: {
+          double: (payload) => payload * 2,
+          plusMillion: (payload) => payload + 1_000_000,
+        },
+      }
+    )
+
+    TASK_CALLS.forEach(({name, id, payload, expectedResult}) => {
+      cy.get('input[name="taskName"]').clear().type(name)
+      cy.get('input[name="taskId"]').clear().type(id)
+      cy.get('input[name="payload"]').clear().type(payload)
+      cy.get('button').click()
+      cy.contains(`${name}-${id}: ${expectedResult}`)
+    })
+  })
+})