How to implement pagination with SwiftUI's List view

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.

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free

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 in
        ListItemView(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.

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free