RxJS Challenge #17: Non-flicker loader

When you load data you never know how long it would take. It’s annoying for the user to see spinner for just a fraction of a second when data loads very fast. Let’s try to create a pattern that we would call “non-flicker loader”. Here are the requirements:

1. If loading took less than 1 second — we will not show loader at all
2. If loading took more than a second — we start showing loader and keep it on the screen for at least 1 second

For example our data took 1.2 seconds to load. For the second we do not show anything then a loader appears. After .2s we receive data but we keep loader on screen for .8s more so it does not appear flickery.

Here is a boilerplate StackBlitz for you to try it yourself first!

⚒ Setting up the stream

This is an interesting task. It might not be obvious how to approach it. Let’s first set up macro stream isolating all the logic into a separate function: