Keep the previous value when creating a new instance?

I am fetching and refetching new articles using the same function, which looks like:

@action.bound
fetchArticles() {
    this.articles = fromPromise(fetch("http://someurl"))
}

…and I am switching over store.articles.state to render a loading state, error state, and fulfilled state.

However, when re-fetching by calling this function again, it causes my view to go back into the loading state (which says “loading”). I am not really a fan of this approach, since what I would like to do here is to display the old state, which is the old list of articles, until the fetch has resolved. Otherwise my view will flash into a loading state and back which is a bit too… noisy? There is too much going on.

Perhaps when re-fetching I would like to option to freeze articles.value so it doesn’t go into undefined, and when articles.state is pending and I have data inside articles.value I can still display this old value. I would imagine I would render the old values but at 0.5 opacity or something similar. Maybe something like:

switch(articles.state) {
     case ("pending" && articles.value): return results({ opacity: 0.5, pointerEvents: none })
     case "pending" : return preloading()
     case "rejected": return error()
     case "fulfilled": return results()
  }

Is this a use case that has been covered before? As I have been looking for a solution!

[mweststrate]

Idea, allow fromPromise to be passed in a previous PromiseBased observable to reflect the state of the old one, until the new one has resolved?

[mweststrate]

Released as 5.1.0. Thanks @ItamarShDev!