Refreshable task with follow-up work after refresh is done

[oskarek]

I'm wondering how one should do to use the refreshable modifier on a List, where the refresh action is setting off several tasks, but the spinning should only occur during a subset of these tasks.

So, for example, let's say I want to do two things as a result of pulling to refresh on the list:

1. Reload the list's rows.
2. Load the images for all the rows.

and I want the spinning to stop after task 1 is finished, and then let the images continue to load in the background.

To work with the refreshable API, I'm doing this in the view:

List(viewStore.rows) { row in
  ...
}
.refreshable { await viewStore.send(.pulledToRefresh).finish() }

where the reducer has something like these lines in it:

switch action {
  ...
  case .pulledToRefresh:
    return .task { .rowsReloaded(await refreshClient.refreshRows()) }

  case .rowsReloaded(let rows):
    state.rows = rows
    return .run { send in
      // fetch the images for the rows
    }
  ...
}

This way, the viewStore.send(.pulledToRefresh).finish() will wait for the rows to reload and all the images to load, before finishing, which means the list activity indicator will spin for this entire duration. How would I do to make it stop spinning before the images start to load?

[stephencelis]

@oskarek While it's possible to do a little coordination with your store to make it so refreshable effects are only tied to the first stage, the main thing that stands out to me here is that you're doing image loading in a reducer. Is your reducer doing any significant logic with the images it is loading, and are you testing this logic?

We generally do not recommend loading or storing images in your app's domain if it's for display purposes. Instead we recommend using AsyncImage or one of the many open source image loading libraries out there.

For the more general case, though, you would sequence actions into the store in the refreshable modifier:

.refreshable {
  await viewStore.send(.actionThatSuspendsForRefreshing).finish()
  viewStore.send(.actionToKickOffWhenRefreshingIsComplete)
}

Edit: @mbrandonw reminded me that we also have ViewStore.send(while:), so you could use a boolean from state to describe how long refreshing should be visible:

.refreshable {
  await viewStore.send(.action, while: \.isRefreshing)
}

[oskarek]

(unless I misunderstood something, but that's at least what seemed to happen when I tried it out)

[stephencelis]

I saw your updated answer, suggesting to use the ViewStore.send(while:). I forgot to mention that I actually have tried that. The problem is that it cancels the task when the isRefreshing turns to false, which means that the following tasks (the image loading in my example) gets cancelled

@oskarek I don't think the task should be cancelled when send(while:) completes, or see how or where that would happen. Are you sure this was the case? Can you share a simple repro, if so?

Hmm, yes maybe. Although I think it is nice to have control over when exactly the image loading occurs. In this case for instance, I want to bulk load all the rows' images directly after the rows are reloaded for example. That's the behavior I want, and to have test coverage for that

You'd still have control in the view layer, no? Your image loader could do the loading in the row's onAppear? Or you could kick off that work after await viewStore.send(…).finish() resumes.

[oskarek]

You're right, I was mistaken. I got confused because I was actually using a ScrollView(.vertical) rather than a List, and it seems like that caused the issue. It seems like each time time the state updates, and those changes cause the view to be recalculated, the refreshable task gets cancelled. This is why it got cancelled when I set isRefreshing back to false. But yeah, that's a separate issue (and one that has nothing to do with TCA, because same thing happens with vanilla SwiftUI).

So that means the ViewStore.send(while:) is a great solution, that solves the problem. Thanks for the help 🙂

[oskarek]

@stephencelis do you have some documentation or reference code I can look at, for how to use AsyncImages for displaying remote images, while keeping the ability to mock the image loading, for previews and for running the app with no internet connection? Because I'm not sure how I would do that (which is the reason I started using the ImageClient technique). What do you use to display images in the app, and allow for offline usage?

[stephencelis]

@oskarek I haven't dug in deep but AsyncImage has some initializers for things like placeholders and handling failure. You could probably utilize these parameters directly, or you could write a wrapper around AsyncImage that uses an environment value to set an image for mocking.