Gulir tak terbatas di aplikasi: apa itu, prinsip dan implementasi

Apa itu gulir tak terbatas di aplikasi mobile?

Gulir tak terbatas (Infinite Scroll) adalah pola pemuatan data di mana elemen baru secara otomatis ditambahkan ke akhir daftar saat pengguna menggulir. Pengguna tidak mengklik tombol “Berikutnya” atau “Muat lebih banyak” — sistem itu sendiri menentukan kapan harus meminta batch data berikutnya dan menyisipkan catatan baru ke dalam daftar yang ada secara mulus.

Infinite Scroll menjadi populer berkat media sosial — Twitter, Instagram dan TikTok menggunakannya sebagai mekanisme pengiriman konten utama. Menurut data Nielsen Norman Group (2024), Infinite Scroll meningkatkan keterlibatan sebesar 30–50% di aplikasi konten, karena mengurangi beban kognitif: pengguna tidak perlu memutuskan untuk pindah ke halaman berikutnya. Namun, untuk tugas yang memerlukan navigasi yang tepat (pencarian, perbandingan produk), Infinite Scroll dapat mengurangi efisiensi.

Secara teknis, gulir tak terbatas terdiri dari tiga komponen: scroll listener (melacak posisi gulir), threshold (jarak ke akhir daftar untuk memicu pemuatan) dan pagination mechanism (permintaan API dan penyisipan data). Pengaturan threshold yang tepat sangat penting: jika terlalu dini (1000 px ke akhir) pengguna menerima permintaan yang tidak perlu, jika terlalu lambat (50 px) — ia melihat jeda pemuatan.

Bagaimana cara kerja Infinite Scroll: arsitektur dan mekanika

Arsitektur Infinite Scroll didasarkan pada model peristiwa: komponen daftar menghasilkan peristiwa saat mencapai threshold gulir, ViewModel memprosesnya dan memanggil repositori untuk memuat batch data berikutnya. Setelah menerima respons, elemen baru dimasukkan ke dalam daftar, dan UI diperbarui melalui adapter. Rantai ini harus asinkron dan tidak memblokir thread UI.

Algoritma dasar Infinite Scroll mencakup empat langkah. Inisialisasi: saat pertama kali layar dibuka, batch data pertama dimuat (halaman 1 atau cursor = null). Pelacakan: scroll listener memeriksa apakah pengguna telah mencapai threshold — biasanya 200–500 px ke akhir daftar. Pemuatan: permintaan dikirim ke API dengan parameter paginasi, indikator pemuatan ditampilkan di UI (spinner di footer). Penyisipan: elemen baru ditambahkan ke adapter, posisi gulir disesuaikan untuk menghindari lompatan.

Aspek penting adalah debounce permintaan. Jika pengguna menggulir dengan cepat ke akhir, pemicu dapat aktif beberapa kali sebelum menerima respons dari server. Tanpa debounce, ini menyebabkan permintaan duplikat (race condition). Solusinya adalah memblokir permintaan baru sampai permintaan sebelumnya selesai. Bendera isLoading di ViewModel mencegah panggilan ganda: set isLoading = true saat mengirim permintaan, reset saat menerima respons atau kesalahan.

Di platform mobile, mekanisme khusus digunakan untuk Infinite Scroll. Di iOS, ini adalah prefetchDataSource di UICollectionView, yang secara otomatis meminta data untuk sel di luar layar. Di Android — Pustaka Paging 3 dari Google, yang menyediakan arsitektur siap pakai dengan PagingSource, PagingData dan PagingDataAdapter. Paging 3 mendukung RemoteMediator untuk menggabungkan data jaringan dan lokal serta secara otomatis mengelola status pemuatan.

Paginasi berbasis kursor vs offset

Paginasi berbasis offset menggunakan parameter page dan size: page=2, size=20 mengembalikan catatan 21–40. Pendekatan ini sederhana dalam implementasi, tetapi memiliki masalah mendasar — jika catatan ditambahkan atau dihapus di database di antara permintaan, offset menjadi kacau (pengguna melihat duplikat atau celah). Di feed dengan frekuensi perubahan tinggi (berita, komentar), paginasi berbasis offset memberikan hasil yang salah.

Paginasi berbasis kursor menggunakan pengidentifikasi unik elemen terakhir (kursor): after=id_12345&limit=20. Server mengembalikan 20 catatan setelah kursor yang ditentukan. Pendekatan ini menjamin konsistensi data terlepas dari penyisipan dan penghapusan. Menurut GraphQL Best Practices (2024), paginasi berbasis kursor direkomendasikan untuk semua aplikasi real-time di mana data berubah secara dinamis.

Pilihan antara pendekatan tergantung pada jenis aplikasi. Di media sosial (Instagram, TikTok) — hanya berbasis kursor, karena feed terus diperbarui. Di katalog dengan perubahan jarang (kategori produk toko online) paginasi berbasis offset dapat diterima. Untuk skenario hibrida, Google merekomendasikan Paging 3 RemoteMediator, yang menggabungkan paginasi berbasis kursor dari jaringan dengan paginasi berbasis offset dari database lokal Room.

Implementasi Infinite Scroll di iOS dan Android

Di Android, pendekatan standar adalah pustaka Paging 3 dari Jetpack. PagingSource mendefinisikan sumber data (jaringan atau DB), PagingData berisi potongan data, dan PagingDataAdapter menampilkannya di RecyclerView. Paging 3 secara otomatis mengelola jarak prefetch, percobaan ulang dan penyegaran. Untuk integrasi dengan jaringan, RemoteMediator digunakan: memuat data dari API, menyimpannya di Room dan memberi tahu PagingSource tentang pembaruan. Menurut Google I/O 2024, lebih dari 60% aplikasi Android dengan Infinite Scroll menggunakan Paging 3.

Contoh implementasi dasar Paging 3:

class FeedPagingSource(
    private val api: FeedApi
) : PagingSource<String, Post>() {
    override suspend fun load(
        params: LoadParams<String>
    ): LoadResult<String, Post> {
        val response = api.getFeed(
            cursor = params.key,
            limit = params.loadSize
        )
        return LoadResult.Page(
            data = response.items,
            prevKey = null,
            nextKey = response.nextCursor
        )
    }
}

Di iOS, untuk implementasi Infinite Scroll digunakan UICollectionView dengan prefetchDataSource. Protokol UICollectionViewDataSourcePrefetching berisi metode collectionView(_:prefetchItemsAt:), yang dipanggil ketika sistem memperkirakan pengguliran ke index paths tertentu. Tidak seperti Android Paging 3, di iOS tidak ada pustaka paginasi bawaan — pengembang mengimplementasikannya secara manual atau menggunakan solusi pihak ketiga seperti RxSwift + NSLayoutConstraint atau pipeline berbasis Combine.

Contoh prefetch di iOS:

extension FeedViewController: UICollectionViewDataSourcePrefetching {
    func collectionView(
        _ collectionView: UICollectionView,
        prefetchItemsAt indexPaths: [IndexPath]
    ) {
        let lastRow = collectionView.numberOfItems(inSection: 0) - 1
        if indexPaths.contains(IndexPath(row: lastRow, section: 0)) {
            viewModel.loadNextPage()
        }
    }
}

SwiftUI menyediakan pendekatan yang lebih deklaratif melalui pengubah onAppear. Pengembang menempatkan ProgressView di akhir daftar dan ketika muncul, memicu pemuatan halaman berikutnya. Menurut Apple WWDC 2024, API baru AsyncSequence dan Swift Algorithms menyederhanakan implementasi gulir tak terbatas dengan menyediakan operator chunking dan debounce bawaan.

Masalah UX gulir tak terbatas dan solusinya

Masalah UX utama Infinite Scroll adalah kehilangan footer dan navigasi. Di toko online, pengguna sering ingin pergi ke footer untuk kontak atau tautan. Gulir tak terbatas membuat footer tidak dapat diakses — footer terus bergerak ke bawah seiring pemuatan. Solusinya adalah menambahkan tombol mengambang untuk gulir cepat ke atas (FAB) atau memperbaiki footer secara terpisah dari daftar.

Masalah kedua adalah kurangnya riwayat gulir. Jika pengguna melihat produk menarik di posisi 3, menggulir ke 50, lalu mengklik “Kembali” — ia kembali ke awal daftar dan harus menggulir lagi ke posisi 50. Solusinya adalah menyimpan posisi gulir di ViewModel atau menggunakan pemulihan status di tingkat Activity/UIViewController. iOS mendukung NSUserActivity untuk pemulihan posisi, Android — onSaveInstanceState.

Masalah ketiga adalah kinerja dengan ribuan elemen. Jika virtualisasi tidak dikonfigurasi, setelah 500–1000 elemen dimuat, aplikasi mulai melambat karena peningkatan konsumsi memori. Solusinya adalah menggunakan virtualisasi RecyclerView atau UICollectionView, yang hanya menyimpan sel yang terlihat + prefetched di memori. Pembersihan berkala data lama (membuang halaman lebih jauh dari N halaman) juga mengurangi beban.