Design Mobile Paging & Infinite Scrolling Library Architecture

1. Problem Statement & Scope

System Mission

Design a memory-efficient, flicker-free, bidirectional mobile pagination and prefetching library architecture capable of rendering lists with millions of items at 120 FPS, utilizing opaque cursor-based keyset pagination, database-backed single source of truth mediation, asynchronous UI diffing, and bounded RAM page eviction.

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

Functional Requirements

1. Cursor-Based Keyset Pagination: Request sequential pages using opaque base64 cursor tokens containing composite sort keys (e.g. (timestamp, item_id)), preventing missing or duplicate items during real-time insertions.
2. Predictive Boundary Prefetching: Trigger asynchronous background page fetches when the user scrolls within $P$ items of list boundary (e.g. prefetch_distance = 5).
3. Database-Mediated Single Source of Truth: Network responses are written directly to local SQLite; UI observes reactive database streams (Room PagingSource / CoreData NSFetchedResultsController).
4. Memory Bounding & Eviction: Cap maximum items loaded in memory (e.g. max_size = 200); automatically drop distant scrolled-out pages from RAM while preserving scroll position via placeholders.
5. Bidirectional Scrolling: Seamlessly support scrolling both down (older items) and up (newer items) in infinite feed timelines.

Non-Functional Requirements (SLAs/SLOs)

• UI Frame Rate Budget: Strict 120 FPS ($8.33\text{ ms}$ render budget); zero disk I/O, database queries, or diff computations executed on the main UI thread.
• Client Memory Footprint: Local RAM heap usage bounded to $< 30\text{ MB}$ regardless of whether the user scrolls through 100 or 100,000 items.
• Backend Query Latency: Cursor seek query latency $< 5\text{ ms}$ ($P99$) in Aurora PostgreSQL ($O(1)$ composite index seek).
• Network Resilience: Granular load state tracking (IDLE, LOADING, ERROR) per boundary (prepend, append, refresh) with inline retry capabilities.

Out-of-Scope

• Virtual list rendering for web HTML DOM tree optimizations (e.g. react-window DOM virtualization).
• Server-side full-text lexical ranking algorithms.

2. Capacity & Scale Estimation

Device & Memory Calculations

• Page Sizing: Standard page size $= 20\text{ items}$.
• Item Data Footprint:
  • In-memory data model $= 1\text{ KB/item}$.
  • Loaded into RAM with active UI viewholders (200 items capped): $200 \times 1\text{ KB} = \mathbf{200\text{ KB Data Heap}}$.
  • Decoded image bitmap cache (LRU cache capped at 20 visible items): $20 \times 1\text{ MB} = \mathbf{20\text{ MB Bitmap RAM}}$.
• Backend Pagination QPS:
  • $50\text{ Million DAU}$ scrolling an average of 10 pages/day $\implies \mathbf{500\text{ Million Page Requests/Day}}$. $\text{Average Paging QPS} = \frac{500 \times 10^6}{86,400 \text{ s}} \approx 5,787 \text{ QPS (Peak: } 20,000\text{ QPS)}$
• Network Payload Sizing:
  • 20 items $\times 1\text{ KB} = \mathbf{20\text{ KB compressed payload}}$ per page request.

3. High-Level Architecture & AWS Component Mapping

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

Component Responsibility Breakdown

4. API Interface Design & Wire Protocols

1. Keyset Cursor Pagination Endpoint

httpCopy
GET /v1/feed/items?limit=20&cursor=eyJjcmVhdGVkX2F0IjoxNzE4MDAwMDAwLCJpdGVtX2lkIjoiODhhOTFjNzQifQ== HTTP/1.1
Host: api.app.aws.internal
Authorization: Bearer <jwt_token>
Accept: application/json

Response: 200 OK

jsonCopy
{
  "items": [
    {
      "id": "item_88a91c74",
      "title": "Deep Dive into Keyset Pagination",
      "author": "Distributed Systems Staff",
      "created_at": 1718000000000,
      "thumbnail_url": "https://cdn.app.com/thumb/88a91.webp"
    }
  ],
  "page_info": {
    "page_size": 20,
    "has_next_page": true,
    "has_previous_page": true,
    "next_cursor": "eyJjcmVhdGVkX2F0IjoxNzE3OTk5ODAwLCJpdGVtX2lkIjoicG9zdF8wOTkifQ==",
    "prev_cursor": "eyJjcmVhdGVkX2F0IjoxNzE4MDAwMjAwLCJpdGVtX2lkIjoicG9zdF8xMDIifQ=="
  }
}

5. Data Models & Storage Architecture

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

1. PostgreSQL Composite Keyset Schema & Index

sqlCopy
CREATE TABLE feed_items (
    item_id VARCHAR(64) PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE NOT NULL,
    author_id VARCHAR(64) NOT NULL
);

-- Crucial: Composite B-Tree index matches exact ORDER BY and WHERE tuple syntax
CREATE INDEX idx_feed_keyset_pagination ON feed_items (created_at DESC, item_id DESC);

-- Keyset Query Seeking Page 10,000 in < 1ms:
SELECT item_id, title, content, created_at, author_id
FROM feed_items
WHERE (created_at, item_id) < ('2026-09-04 12:00:00+00', 'item_88a91c74')
ORDER BY created_at DESC, item_id DESC
LIMIT 20;

6. Core Algorithms & Deep-Dive Workflows

1. Database-Mediated Paging Lifecycle (RemoteMediator)

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

2. Myers Diff Algorithm & Memory Eviction Mechanics

When memory exceeds max_size = 200, the Paging engine trims distant pages:

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...