Adding subtle elegance to components with RxJS transitions
The way we can improve the user experience of our UI components is by adding clear and visually appealing feedback. And what could be a better way to do so, than adding a sophisticated reactive animation to a component? Let’s imagine that, for our brand-new design system, we need to create an upload button with a visually appealing progress indicator that gracefully updates.
How to do it…
In this recipe, we are going to be creative and craft a recipe for an upload button where we are gradually going to increase the progress and control animation states in between until the upload is fully over.
Step 1 – Increasing the upload progress
As the first step, we are going to define a random progress stream that emits values from 0 to 100:
const uploadProgress$ = range(0, 101).pipe(
zipWith(interval(50)),
map(([value, _]) => value),
take(101)
);
Here, we could get creative...
