How to add a minimum delay to a React Suspense component when you do not have control over the AJAX call because you are using a library?

Asked Jul 09 '19 at 09:00

Active Oct 22 '19 at 16:58

Viewed 2,016 times

I have the following component wrapped in a Suspense one:

// ...
render(
      <Suspense fallback={<LoadingSpinner />}>
         <MyComponent {...props} />
      </Suspense>
)
// ...

MyComponent uses i18next, which triggers a suspense which loads translations. Eveything works, but the spinner is showed only for an instant and then it disappears because the AJAX requests i18next is making completes.

Can I tell the Suspense component to somehow show the spinner at least for 2 seconds? This would improve the UX visually. It would be great to have something like this:

// ...
// minDuration - 2 seconds
render(
      <Suspense fallback={<LoadingSpinner />} minDuration={2000}>
         <MyComponent {...props} />
      </Suspense>
)
// ...

I do not have control over the i18next AJAX, or I think so, as it is a library.

Is it possible to achieve what I want with Suspense?

edited Oct 22 '19 at 16:58

asked Jul 09 '19 at 09:00

tonix

6,671
13
75
136

I don't think react has this functionality yet, but you can achieve this by adding a `setTimeout` for your `AJAX` call i.e. calling your API after 2 seconds using `setTimeout`. - `setTimeout(function(){Call your API here},2000) ` – ravibagul91 Jul 09 '19 at 09:05
I tried with Promise.all and it worked. Thanks! – tonix Jul 09 '19 at 09:41
Does this answer your question? [React suspense/lazy delay?](https://stackoverflow.com/questions/54158994/react-suspense-lazy-delay) – Timo May 04 '20 at 11:57

How to add a minimum delay to a React Suspense component when you do not have control over the AJAX call because you are using a library?

0 Answers0