Bar showing and hiding delayed

I trigger the loading bar manually for my fetch requests by dispatching showLoading() before the fetch and hideLoading() after I received data. Although the loading bar shows, animates and then hides, everything is delayed! It almost looks like nothing is happening on showLoading() and the bar only shows once hideLoading() is called. Then it stays there for a default time and disappears.

Here is the part of my custom middleware action, where I dispatch the actions around the API call:

  store.dispatch(showLoading())
  console.log("SHOW")

  next({
    type: requestType,
    [ pendingTask ]: begin
  })


  // Passing the authenticated boolean back in our data will let us distinguish between normal and secret quotes
  return callApi(endpoint, authenticated).then(
    response => {
      store.dispatch(hideLoading())
      console.log("HIDE")
      return next({
        response,
        authenticated,
        receivedAt: Date.now(),
        type: successType,
        [ pendingTask ]: end
      })
    },
    error => {
      store.dispatch(hideLoading())
      return next({
        error: error.message || 'There was an error.',
        type: errorType,
        [ pendingTask ]: end
      })
    }
  )

The console.log outputs next to the dispatches appear much earlier than the bar appears. I didn’t measure it, but it might be a fifth of a second or more.

The completion and hiding of the bar is only delayed for short running requests. If the request runs longer (say 2 seconds or more), the bar seems to complete and hide once the request finished (and I see the “HIDE” message in the console).

The <LoadingBar /> tag uses the default values. But even playing with the params did not fix the delay.

Am I missing something?

UPDATE:

Here you can see the behavior. When loading-bar/SHOW action is triggered, nothing happens. Only slightly before the loading-bar/HIDE action is triggered, does the bar appear and begin to move. Then, after the request has already finished, the bar still takes time to animate to 100% and finally disappear.

[mironov]

@morgler Please take a closer look at the gif posted. If you check its 16-17 frames you can see that Loading Bar is shown and slowly starting to animate. I agree that the current behavior looks weird and makes the app looks slower than it is.

Loading Bar doesn’t get displayed for the first 200ms (default updateTime) in order to skip instant requests. So technically once it is shown, it should animate to 100%.

We can make the final animation quicker or hide Loading Bar right away if it just started the animation. I’ll keep the issue open and give it some thought.

Meanwhile, you can set updateTime to a higher value:

<LoadingBar updateTime={500} />

If your requests finish in less than 500ms, Loading Bar will not be shown.

[reginaldwhite]

Yes; I will try. We are using redux-thunk as well.