অ্যাপ্লিকেশনে ইনফিনিটি স্ক্রল: এটি কী, নীতি এবং বাস্তবায়ন

মোবাইল অ্যাপ্লিকেশনে ইনফিনিটি স্ক্রল কী?

ইনফিনিটি স্ক্রল (Infinite Scroll) হল একটি ডেটা লোডিং প্যাটার্ন যেখানে ব্যবহারকারী স্ক্রল করার সময় নতুন উপাদান স্বয়ংক্রিয়ভাবে তালিকার শেষে যুক্ত হয়। ব্যবহারকারী «পরবর্তী» বা «আরও লোড করুন» বটনে ক্লিক করেন না — সিস্টেম নিজেই স্থির করে কথায় ডেটার পরবর্তী ব্যচ আনতে হবে এবং বিদ্যমান তালিকায় নতুন এন্ট্রি নির্বিঘ্নে যুক্ত করে।

সামাজিক মাধ্যমগুলির জন্য ধন্যবাদ ইনফিনিটি স্ক্রল জনপ্রিয়তা অর্জন করেছে — Twitter, Instagram এবং TikTok এটিকে তাদের প্রধান কন্টেন্ট বিতরণ প্রক্রিয়া হিসাবে ব্যবহার করে। Nielsen Norman Group (2024) এর মতে, Infinite Scroll কন্টেন্ট অ্যাপ্লিকেশনগুলির জন্য নিয়োজিতা 30–50% বাড়ায় কারণ এটি জ্ঞানগত বোঝা কমায়: ব্যবহারকারীকে পরবর্তী পাতায় যাওয়ার সিদ্ধান্ত নিতে হয় না। তবে, সত্রিক নেভিগেশন প্রয়োজন কাজের জন্য (অনুসন্ধান, পণ্য তুলনা), Infinite Scroll দক্ষতা হ্রাস করতে পারে।

কারিগরিগতভাবে, Infinite Scroll তিনটি উপাদান নিয়ে গঠিত: একটি scroll listener (স্ক্রল অবস্থান ট্রেক করে), একটি threshold (লোডিং ট্রিগার করতে তালিকার শেষ পর্যন্ত দূরত্ব) এবং একটি পেগিনেশন প্রক্রিয়া (API অনুরোধ এবং ডেটা সন্নিবেশ)। threshold এর सठিক কানফিগারেশন অত্যন্ত গুরুত্বপূর্ণ: যদি ট্রিগার অতি তাড়াতাড়ি হয় (1000 পিক্সেল বাকি), তবে ব্যবহারকারী অনাভ্য়শ্যক অনুরোধ পাবেন; যদি অতি দেরি (১০ পিক্সেল), তবে ব্যবহারকারী লোডিং বিরতি লক্ষ করবেন।

Infinite Scroll কিভাবে কাজ করে: আর্কিটেক্চার এবং মেকানিক্স

Infinite Scroll এর আর্কিটেক্চার ইভেন্ট-চালিত মডেল এর উপর নির্মিত: তালিকা উপাদানটি একটি ইভেন্ট জেনারেট করে যখন স্ক্রল থ্রেশোল্ডে পৌঁছা যায়, ViewModel এটি প্রক্রিয়া করে এবং ডেটার পরবর্তী ব্যচ লোড করতে রিপজিটরিতে কল করে। প্রতিক্রিয়া পাওয়ার পর, নতুন উপাদান তালিকায় সন্নিবেশিত হয়, এবং UI অ্যাডাপ্টারের মাধ্যমে অপডেট করা হয়। এই শ্রৃংখলাটি অসিংক্রোনাস হতে হবে এবং UI থ্রেড ব্লক করা উচিত নয়।

মৌলিক Infinite Scroll অলগরিদমটিতে চারটি ধাপ রয়েছে। আরম্ভ: স্ক্রিন প্রথম বার খোলার সময়, ডেটার প্রথম ব্যচ লোড করা হয় (পাতা 1 বা cursor = null)। ট্রেকিং: scroll listener পরিক্ষা করে যে ব্যবহারকারী থ্রেশোল্ডে পৌঁছেছে কিনা — সাধারণত তালিকার শেষ থেকে 200–500 পিক্সেল। লোডিং: পেগিনেশন প্যারামিটার সহ API এ একটি অনুরোধ প্রেরণ করা হয়, UI তে একটি লোডিং সংকেতক (ফুটারে স্পিনার) দেখানো হয়। সন্নিবেশ: নতুন উপাদান অ্যাডাপ্টারে যুক্ত করা হয়, উঠপতন এড়াতে স্ক্রল অবস্থান সমায়োজিত করা হয়।

একটি গুরুত্বপূর্ণ দিক হল অনুরোধ debouncing। যদি ব্যবহারকারী দ্রুত শেষে স্ক্রল করে, তবে সার্ভার থেকে প্রতিক্রিয়া পাওয়ার আগেই ট্রিগার বারবার ট্রিগার হতে পারে। debouncing ছাড়া, এটি ডপ্লিকেট অনুরোধ (রেস কন্ডিশন) এর দিকে নিয়ে যায়। সমাধান হল পূর্ববর্তী অনুরোধ শেষ না হতে নতুন অনুরোধ ব্লক করা। ViewModel এর একটি isLoading ফ্ল্যাগ একাধিক কলকে প্রতিরোধ করে: অনুরোধ প্রেরণের সময় isLoading = true সেট করুন, প্রতিক্রিয়া বা ত্রুটি পাওয়ার পর রিসেট করুন।

মোবাইল প্লেটফর্মগুলিতে, Infinite Scroll এর জন্য বিশেষায়িত প্রক্রিয়া ব্যবহৃত হয়। iOS এ, UICollectionView এ থাকা prefetchDataSource ব্যবহৃত হয়, যা স্বয়ংক্রিয়ভাবে অফ-স্ক্রিন সেলের জন্য ডেটা আনতে রাইত করে। Android এ, Google এর Paging 3 Library ব্যবহৃত হয়, যা PagingSource, PagingData এবং PagingDataAdapter সহ একটি প্রস্তুত আর্কিটেক্চার প্রদান করে। Paging 3 নেটওয়ার্ক এবং লোকাল ডেটা সম্মিলিত করার জন্য RemoteMediator সমর্থন করে এবং স্বয়ংক্রিয়ভাবে লোডিং অবস্থা পরিচালনা করে।

Cursor-based বাম Offset-based পেগিনেশন

Offset-based পেগিনেশন page এবং size প্যারামিটার ব্যবহার করে: page=2, size=20 রিকর্ড 21–40 ফিরিয়ে দেয়। এই পদ্ধতিটি বাস্তবায়নে সরল কিন্তু এটিতে একটি মৌলিক সমস্যা রয়েছে — যদি অনুরোধের মধ্যে ডেটাবেসে রিকর্ড যুক্ত বা মুছে ফেলা হয়, তবে অফসেট বিয়ুক্ত হয় যায় (ব্যবহারকারী ডপ্লিকেট বা ফাঁক দেখে)। উচ্চ পরিবর্তন হার বিশিষ্ট ফিডের জন্য (সংবাদ, মন্তব্য), offset-based পেগিনেশন ভুল ফলাফল দেয়।

Cursor-based পেগিনেশন শেষ উপাদানের একটি অনন্য পরিচায়ক (cursor) ব্যবহার করে: after=id_12345&limit=20। সার্ভার নির্দিষ্ট কর্সারের পরে 20টি রিকর্ড ফিরিয়ে দেয়। এই পদ্ধতি সন্নিবেশ এবং মুছে ফেলা নির্বিশেষে ডেটা সংগতি নিশ্চিত করে। GraphQL Best Practices (2024) এর মতে, cursor-based পেগিনেশন সকল রিয়াল-টাইম অ্যাপ্লিকেশনের জন্য সুপারিশিত যেখানে ডেটা গতিশীলভাবে পরিবর্তিত হয়।

পদ্ধতিগুলির মধ্যে পছন্দ অ্যাপ্লিকেশনের ধরণের উপর নির্ভর করে। সামাজিক মাধ্যম (Instagram, TikTok) এর জন্য — শুদ্ধমাত্র cursor-based, কারণ ফিড নিরন্তর অপডেট হয়। ক্যাটালোগ এর জন্য যেখানে পরিবর্তন কম (অনলাইন স্টোরের পণ্য বিভাগ), offset-based পেগিনেশন গ্রহণযোগ্য। হাইব্রিড পরিদৃশ্যের জন্য, Google Paging 3 RemoteMediator সুপারিশ করে, যা নেটওয়ার্ক থেকে cursor-based পেগিনেশনকে স্থানীয় Room ডেটাবেস থেকে offset-based পেগিনেশনের সাথে সম্মিলিত করে।

iOS এবং Android এ Infinite Scroll বাস্তবায়ন

Android এ, মানক পদ্ধতি হল Jetpack এর Paging 3 লাইব্রেরি। PagingSource ডেটা উৎস (নেটওয়ার্ক বা ডেটাবেস) সংজ্ঞায়িত করে, PagingData ডেটা চাঁক ধারণ করে, এবং PagingDataAdapter সেগুলি RecyclerView এ প্রদর্শন করে। Paging 3 স্বয়ংক্রিয়ভাবে prefetch দূরত্ব, পুনরায় চেষ্টা এবং রিফ্রেশ পরিচালনা করে। নেটওয়ার্ক ইন্টিগ্রেশনের জন্য RemoteMediator ব্যবহৃত হয়: এটি API থেকে ডেটা লোড করে, Room এ সংরক্ষণ করে, এবং PagingSource কে আপডেট সম্পর্কে জানায়ॢ Google I/O 2024 এর মতে, Infinite Scroll ব্যবহারকারী 60% এর বেশি Android অ্যাপ্লিকেশন Paging 3 ব্যবহার করে।

মৌলিক 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
        )
    }
}

iOS এ, Infinite Scroll বাস্তবায়নে UICollectionView ব্যবহার করে prefetchDataSource সহ। UICollectionViewDataSourcePrefetching প্রোটোকলে collectionView(_:prefetchItemsAt:) পদ্ধতি রয়েছে, যা কল করা হয় যখন সিস্টেম নির্দিষ্ট index paths এ স্ক্রলের পূর্বাভাস করে। Android Paging 3 এর বিপরীতে, iOS এ কোন বিল্ট-ইন পেগিনেশন লাইব্রেরি নেই — ডেভেলপাররা এটি ম্যানুয়ালি বাস্তবায়ন করে বা RxSwift + NSLayoutConstraint বা Combine-ভিত্তিক পাইপলাইনের মত তৃতীয় পক্ষের সমাধান ব্যবহার করে।

iOS এ prefetch এর উদাহরণ:

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 onAppear মডিফায়ারের মাধ্যমে একটি আরও ডিক্লারেটিভ পদ্ধতি প্রদান করে। ডেভেলপার তালিকার শেষে একটি ProgressView রাখেন এবং যখন এটি দেখা যায়, তখন পরবর্তী পাতার লোডিং ট্রিগার করে। Apple WWDC 2024 এর মতে, নতুন AsyncSequence এবং Swift Algorithms API বিল্ট-ইন chunking এবং debounce অপারেটর প্রদান করে Infinite Scroll বাস্তবায়ন সরল করে।

ইনফিনিটি স্ক্রলের UX সমস্যা এবং সমাধান

Infinite Scroll এর প্রধান UX সমস্যা হল ফুটার এবং নেভিগেশন হারানো। অনলাইন স্টোরে, ব্যবহারকারীরা প্রায়শই যোগাযোগ বা লিংকের জন্য ফুটারে যেতে চান। Infinite Scroll ফুটারকে অগাম্য করে তোলে — আরও কন্টেন্ট লোড হওয়ার সাতেই এটি নিচে সরতে থাকে। সমাধান হল দ্রুত শীর্ষে স্ক্রলের জন্য একটি ফ্লোটিং এক্শন বটন (FAB) যুক্ত করা বা তালিকা থেকে আলাদাভাবে ফুটার পিন করা।

দ্বিতীয় সমস্যা হল স্ক্রল ইতিহাসের অভাব। যদি কোন ব্যবহারকারী অবস্থান 3 এ একটি আকর্ষণীয় পণ্য দেখেন, অবস্থান 50 এ স্ক্রল করেন, এবং তারপর «পিছনে» টিপেন — তবে তারা তালিকার শীর্ষে ফিরে আসে এবং আবার অবস্থান 50 এ স্ক্রল করতে বাধ্য হয়। সমাধান ViewModel এ স্ক্রল অবস্থান সংরক্ষণ করা বা Activity/UIViewController স্তরে অবস্থা পুনরুদ্ধার ব্যবহার করা। iOS অবস্থান পুনরুদ্ধারের জন্য NSUserActivity সমর্থন করে, Android onSaveInstanceState সমর্থন করে।

তৃতীয় সমস্যা হল হাজার উপাদানের সাথে পরিবেশন। যদি ভার্চুয়ালাইজেশন কানফিগার করা না হয়, তবে 500–1000 লোড করা উপাদানের পরে, মেমরি ব্যবহার বৃদ্ধির কারণে অ্যাপ্লিকেশনটি ধীমা হতে শুরু করে। সমাধা঩ RecyclerView বা UICollectionView এর সাথে ভার্চুয়ালাইজেশন ব্যবহার করা, যা শুদ্ধমাত্র দৃশ্যমান + prefetched সেল মেমরিতে রাখে। পুরনো ডেটার পর্যায়িক পরিষ্কার (N পাতার বেশি পাতা বাদ দেওয়া) ও ভার কমায়।