Pattern to Angular placeholder cache of http response

I want to implement a cache solution that follows these principles:

1. The app will always fetch the real data from the back-end even if there's cache available. Backend data will then replace the cache after it is available.
2. The front-end doesn't need to whether data was updated or not in the backend. This needs to be true even after HTTP calls, the front-end wouldn't need to know that an HTTP Post or HTTP Delete in an endpoint will change some data.
3. The user should only be able to interact with data that is up to date, this means that interaction with data should never end with a message like "this data doesn't exist anymore".

In summary, the cache only will only act as a placeholder for the real data.

The initial solution that I thought about is to simply implement a wrapper of HttpClient that saves the response of GET requests into localStorage using the request data as a key, so that next time this same request is sent, the wrapper would send an Observable that first emits the cache and then emit the real data from the request.

The main problem is that it's is not based on a known pattern, only a solution that came from my head. The second problem would be with the fact that the component would need to differentiate data that users can interact with from data that does not, which would probably be the source of many bugs.

So, what would known alternatives patterns to implement this, and what is the pro and cons of those patterns.