Fix error with pagination

Presentation (Integration)

07:04

Summary

This lesson addresses a bug in the infinite scrolling implementation where the pagination fetch request is triggered dozens of times simultaneously. The instructor identifies that the scroll listener continuously fires as long as the scroll position exceeds the 70% threshold, leading to redundant API calls and processing. To resolve this, a local boolean flag is introduced to track the loading state and prevent new requests until the current fetch operation completes. The instructor notes that while this drastically reduces the API spam, a minor issue of double-triggering remains, which will be properly fixed when integrating the Bloc state management and loading indicators in the next lesson.

Key Ideas

Scroll listeners evaluate continuously, leading to rapid, redundant API requests if position thresholds aren't guarded by state checks.
A local boolean flag acts as a lock to prevent subsequent fetch operations while a current request is in flight.
The UI layer must await the asynchronous data fetching operation to accurately toggle the lock flag back to false once the data arrives.
Clearing cached app data is necessary during development to accurately test pagination network requests without local interference.

Code Snippets

Final state of the scroll listener with the local isLoading flagdart

class _FeaturedBooksListViewState extends State<FeaturedBooksListView> {
  late final ScrollController _scrollController;
  var nextPage = 1;
  var isLoading = false;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() async {
    var currentPositions = _scrollController.position.pixels;
    var maxScrollLength = _scrollController.position.maxScrollExtent;
    if (currentPositions >= 0.7 * maxScrollLength) {
      if (!isLoading) {
        isLoading = true;
        await BlocProvider.of<FeaturedBooksCubit>(context)
            .fetchFeaturedBooks(pageNumber: nextPage++);
        isLoading = false;
      }
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

Architecture Insight

Architecture insight

Pagination bugs are almost always state-machine bugs: a transition that wasn't supposed to happen (loading-during-loading), or a transition that should have but didn't (failure clearing isLoading). The fix is usually clarifying the allowed transitions, not adding more flags.

When a pagination bug shows up, draw the state diagram on paper before changing code — half the time the bug is obvious once you see which arrow is missing.

My Notes

The core issue in this video is race conditions caused by the ScrollController listener firing on every pixel change after the 70% threshold. Architectural Gotcha: The instructor solves this by introducing an isLoading flag locally inside the StatefulWidget. While this works as a quick patch, it introduces an anti-pattern. [Editor's note] In Clean Architecture using Bloc/Cubit, the UI should not manually track the loading state of domain/data operations. The Cubit should be the single source of truth. Ideally, you would: 1. Check if the cubit.state is already a PaginationLoading state before requesting more books. 2. React to state changes via BlocListener or BlocBuilder. The instructor correctly suspects that the remaining "double trigger" bug is related to state management not being fully hooked up to the UI yet, which will be resolved when the UI strictly listens to the Cubit's states.