How to implement pagination with SwiftUI's List view
Learn how to implement infinite scrolling with SwiftUI.
28 Aug 2023 · 4 min read
Pagination is a common technique when displaying a large set of data in lists or grids allowing users to navigate through the data efficiently. By loading and rendering a limited number of items at a time, pagination minimizes the amount of data that needs to be processed, resulting in faster loading times and smoother scrolling.
Pagination can include navigation controls that allow users to move between pages or it can be implemented as infinite scrolling that allows users to continuously scroll through content.
In this article, we'll look at how to implement infinite scrolling with SwiftUI' List view.
Let's get started.

The basic approach behind implementing infinite scrolling with SwiftUI's List is to add a loading row as the last row to the list view and trigger data loading when that row becomes visible:
List {ForEach(viewModel.items, id: \.id) { item inListItemView(item: item)}if viewModel.isMoreDataAvailable {lastRowView}}
As shown above, the last row is only added to the list if there is more data available. The last row might look as follows:
var lastRowView: some View {ZStack(alignment: .center) {switch viewModel.paginationState {case .isLoading:ProgressView()case .idle:EmptyView()case .error(let error):ErrorView(error)}}.frame(height: 50).onAppear {viewModel.loadMoreItems()}}
Depending on pagination state, the last row is configured to show appropriate content like a loading indicator or an error view in case an error occurs.

Newsletter
Like to support my work?
Say hi
Related tags
Articles with related topics
Latest articles and tips