We want to deliver a consistent UX in cases where the users calls a BE API expecting to see some results on the screen different from what is already displayed on the UI. Example: as a User I press the `Run DB Checks` button expecting PMM to run the database checks and to display the DB check results.
The component is essentially a wrapper around the content that we need to blur when the API is being called. It should have two states:
1. isPending=false - the component just renders its children
2. isPending=true - the component displays an overlay which should cover all the children, showing a spinner until the API is done responding or until it bails out with an error. Then the component transitions to state 1.
To consider: should we have a second parameter allowing us to pass an async function (promise) which would set the component to state 1 once it resolves?