ForEachStore with a placeholder Loading

[knight6700]

how can i implement a placeholder with ForEachStore in ListView

[tgrapperon]

Hey @knight6700. You can probably project your collection's count into some ViewStore's ViewState, and use this to decide if you need to show a list of items or not. It would probably better to track this information with a dedicated value if depending if you want to show your placeholder because the collection is empty, or if it's loading. For example, if your feature's state is:

struct State {
  var isLoading: Bool
  var items: IdentifiedArrayOf<Item.State>
}

You can probably do like this in your view:

struct ViewState: Equatable {
  let isLoading: Bool
  let collectionIsEmpty: Bool
  init(_ state: State) {
    self.isLoading = state.isLoading
    self.itemsIsEmpty = items.isEmpty
  }
}

var body: some View {
  WithViewStore(store, observe: ViewState.init) { viewStore in
    if viewStore.isLoading {
      IsLoadingPlaceholder()
    } else {
      if viewStore.itemsIsEmpty {
        NoItemsPlaceholder()
      } else {
        List {
		  ForEachStore(store.scope(state: \.items,…) { … }
        }
      }
    }
  }
}

Or you can use an .overlay over List instead of ifs:

var body: some View {
  List {
    ForEachStore(store.scope(state: \.items,…) { … }
  }.overlay {
    WithViewStore(store, observe: ViewState.init) { viewStore in
      if viewStore.isLoading {
        IsLoadingPlaceholder()
      } else if viewStore.itemsIsEmpty  {
        NoItemsPlaceholder()
      }
    }
  }
}

It really depends on your layout and the kind of placeholder you want to display, but this is then mostly a SwiftUI problem. You can also model your collection status using an enum instead of two booleans if you want to avoid "invalid" states like isLoading == true && itemsIsEmpty == false, and use that do decide what you should present.

[saroar]

this is what I am doing
https://github.com/AddaMeSPB/AddaMeIOS/blob/main/AddameSPM/Sources/EventView/EventView.swift#L118
using this .redacted(reason: viewStore.isLoadingPage ? .placeholder : [])