Load Your Widgets In The React-Redux Application

I got an interesting requirement for my React app to display multiple widgets with the following conditions:

1. Number of widgets to displayed – UNKNOWN
2. Content to be displayed – UNKNOWN
3. API endpoints – UNKNOWN
4. Only known thing was the placeholder in the widgets where data needs to be displayed
5. Need to display loader for each API call

Fortunately, an API was available to get details such as the number of widgets and their endpoints.

As per the requirement to display loader for each API call, the first screen was:

When the first API returns the response containing details regarding widgets such as the number of widgets and their endpoints, the above widget should turn into the following screen if there are 4 widgets data returned by initial API call:

screen 2

And each of the widgets will call different APIs to get the data it needs…