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

Number of widgets to displayed – UNKNOWN

Content to be displayed – UNKNOWN

API endpoints – UNKNOWN

Only known thing was the placeholder in the widgets where data needs to be displayed

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:

Initial Loader screen

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…