How can I show a progress bar for my get request?

[Musadiqkhan-nullbrainer]

Hello @evmar @abraham @deontologician @vic ,

Here's my get request. It takes some time to return data. Right now I am showing some animation but I would like to show an accurate progress bar from 0 to 100 for the API request. How can I do it? Below is my API in React:

export const getCustomer = (payload) => ajax({ headers: { authString: localStorage.token, }, method: "POST", url: ${baseURL}/getCustomerById?id=${payload}, }).pipe(catchError(handleError("")));

getCustomer (singleUserDetails.id).subscribe((res) => { setCustomers(res.response.data); });

[voliva]

What's an "accurate progress bar from 0 to 100 for the API request"?

when you do one single fetch request you really don't know how long it's going to take. The browser sends the request, then waits for a response. It can take anything between 1ms and ∞.

That's why in those cases you use an indeterminate progress bar, or a determinate progress bar that fakes progress by incrementally increasing the value but never reaching 100 until it's actually complete.

If you have N steps that you do in sequence then it's easier to have an accurate progress bar for that, because you can quantify progress. For 1 single request? no.

For an example of a fake progress with pure rxjs, I came up with this:

const progressCustomer = (payload) => {
  const customer$ = getCustomer(payload).pipe(share())

  const frameProgress$ = animationFrames().pipe(
    map(({ elapsed }) => {
      const factorRemaining = Math.pow(0.999, elapsed) // 0.1% of remaining every tick
      return (1 - factorRemaining) * 100
    }),
    share()
  )

  // When we get the customer, animate progress from whatever value it is to 100 quickly
  const endProgress$ = customer$.pipe(
    last(),
    withLatestFrom(frameProgress$),
    switchMap(([, progress]) =>
      animationFrames().pipe(
        map(({ elapsed }) => progress + elapsed / 2) // Increment by 0.5% every tick
      )
    ),
    takeWhile(progress => progress < 100),
    endWith(100),
    share()
  )

  const progress$ = merge(
    frameProgress$.pipe(takeUntil(endProgress$)),
    endProgress$
  )

  return combineLatest({
    progress: progress$,
    customer: customer$.pipe(startWith(null)),
  }).pipe(
    map(({ progress, customer }) =>
      progress < 100
        ? {
            progress,
          }
        : {
            progress,
            customer,
          }
    )
  )
}

Essentially sets up a fake progress that slows down as it gets closer to 100, and once the response comes back, rushes to complete to 100 and returns the response. You can tweak each fake progress function to get something that feels right.