// Infinite scroll & feed UI — concept page for /concepts/infinite-scroll-feed-ui. // Cursor pagination, virtualization, IntersectionObserver, scroll restore, optimistic updates. // Runtime: browser sandbox. Globals: TopologyBuilder, FlowBuilder. No import/export. const topology = new TopologyBuilder(true); // === Browser layer === const browser = topology.createGroup('browser', { label: 'Browser (client)', x: 60, y: 60, }); browser .addProcess({ id: 'viewport', label: 'Viewport (visible window ~10 rows)', icon: 'browser', state: 'running', decisions: [ { id: 'ADR-001', title: 'Cursor pagination vs offset для feed', status: 'accepted', context: 'Команда строит социальную ленту с непрерывным потоком новых постов (Twitter/Instagram-style). Лента динамическая: 100-1000 inserts/sec в peak, items могут удаляться (модерация, пользователь снёс пост). UI — infinite scroll, пользователь видит до 5000 загруженных items за сессию. Варианты пагинации: (1) Offset (LIMIT 20 OFFSET 100) — простой SQL, привычная семантика, but: каждый insert в начало смещает offset → дубликаты на следующей странице; DELETE → пропуски; cost растёт линейно (DB сканирует и пропускает offset); страница 500 = OFFSET 10000 = full scan. (2) Cursor-based (WHERE id < $cursor LIMIT 20) — opaque token = последний id/timestamp/score; стабильный поток при insert/delete; index seek O(log n); НО нельзя прыгнуть на page 100, нужен composite key для tie-breaking при равных timestamps. (3) Keyset/seek — строгая форма cursor с composite (created_at, id) для tie-breaking. Real-world failures: Reddit раньше использовал offset → у пользователей появлялись одни и те же посты на разных страницах при активной ленте; Twitter API v1 имел offset, в v2 переехал на cursor.', decision: 'Cursor pagination везде, где список динамический. Cursor = base64({lastId, lastScore, lastTs}) — opaque для клиента (можем менять формат без breaking change). Composite key (sort_field, id) обязателен для tie-breaking когда sort_field не уникален (likes, score, popularity). Bidirectional cursor (before/after) для chat и pull-to-refresh. Offset допустим ТОЛЬКО для: (a) admin tables с прямой навигацией по страницам ("page 47 of 200"), (b) статичных списков типа archived reports, (c) когда пользователь явно хочет deep-link "show me page 100". Никогда — для feed, timeline, search results с динамикой. Реализация: GET /v1/feed?cursor=&limit=20 → returns {items, nextCursor, prevCursor, hasMore}. На бэкенде: WHERE (sort_key, id) < (?, ?) ORDER BY sort_key DESC, id DESC LIMIT 21 (берём +1 чтобы знать hasMore). Index: CREATE INDEX ON posts (created_at DESC, id DESC). Trade-off: теряем "jump to page N" — для feed это feature, не bug.', date: '2026-05-14', }, ], }) .addProcess({ id: 'sentinel', label: 'Sentinel

(IntersectionObserver target)', icon: 'monitor', state: 'running', }) .addProcess({ id: 'virtualizer', label: 'Virtualizer (TanStack Virtual)', icon: 'layers', state: 'running', decisions: [ { id: 'ADR-002', title: 'Infinite scroll vs Load-more кнопка vs Numbered pagination', status: 'accepted', context: 'Продуктовая команда спорит про UX ленты. Варианты: (1) Auto infinite scroll — IntersectionObserver триггерит fetch когда пользователь близко к bottom. Pro: zero friction, "залипание" (TikTok/Twitter), max time-on-site. Con: «teleporting footer» — пользователь не может дойти до футера с legal/copyright/about ссылками; нет clear endpoint, decision fatigue; на mobile разряжает батарею; SEO crawlability страдает (Google видит только первые items). Считается dark pattern: NN/g classifies infinite scroll as deceptive если нет alternative. (2) Load more кнопка — explicit click для следующей страницы. Pro: пользователь контролирует, footer достижим, accessibility OK (focus management). Con: friction на каждом шаге, content discovery медленнее. Используется GitHub Issues, Reddit (old), Stack Overflow. (3) Numbered pagination — page 1, 2, 3, ..., 50. Pro: deep-link на конкретную страницу, shareable, predictable, SEO-friendly. Con: требует знать total count (offset!), плохо для динамических лент. Real-world: Instagram использует infinite scroll для main feed, но Explore уже hybrid (load more); Twitter "Following" = infinite, но есть jump-to-top. Discord chat = reverse infinite. E-commerce: Amazon search = numbered, но product cards = infinite scroll внутри page.', decision: 'Hybrid: infinite scroll с явным footer-escape. (1) Auto-prefetch при подходе к bottom (IntersectionObserver triggers за 2-3 viewports до конца) — пользователи получают "залипание" UX без видимых пауз. (2) ОБЯЗАТЕЛЬНО: persistent footer вне scroll-контейнера (sticky bottom bar или sidebar) с legal/about/contact — закрывает dark pattern. (3) После N страниц (~10) или после minute scrolling — показать explicit "Load more" кнопку, дать пользователю break-point. (4) Reverse infinite scroll для chat (load older вверх) с anchor-preserving scroll — критично, иначе viewport "прыгает". (5) Numbered pagination ТОЛЬКО для admin tables, search results с known total, e-commerce categories. (6) Всегда: keyboard shortcuts (j/k Twitter-style), "back to top" floating button после N scrolls, scroll position restore на back-nav (sessionStorage cache cursor + items + scrollTop). Anti-pattern alarm: если product manager говорит "просто infinite scroll везде", показать NN/g research про deceptive design + a11y impact.', date: '2026-05-14', }, ], }) .addProcess({ id: 'cache', label: 'TanStack Query cache (in-memory + sessionStorage)', icon: 'cache', state: 'running', capacity: { maxRps: 100000, replicas: 1 }, }) .addProcess({ id: 'observer', label: 'IntersectionObserver', icon: 'zap', state: 'running', }) .addProcess({ id: 'history', label: 'History API (back/forward)', icon: 'clock', state: 'running', }) .autoResize(); // === Network / CDN === const network = topology.createGroup('network', { label: 'Network', x: 60, y: 480, }); network .addProcess({ id: 'cdn', label: 'Image CDN (Cloudflare / imgix)', icon: 'cloud', state: 'running', capacity: { maxRps: 200000, replicas: 1 }, }) .addProcess({ id: 'edge', label: 'Edge cache (stale-while-revalidate)', icon: 'globe', state: 'running', }) .autoResize(); // === Backend === const backend = topology.createGroup('backend', { label: 'Backend', x: 760, y: 60, }); backend .addProcess({ id: 'api', label: 'Feed API (GET /v1/feed?cursor=...)', icon: 'api', state: 'running', capacity: { maxRps: 50000, replicas: 4 }, }) .addProcess({ id: 'ranking', label: 'Ranking service (ML score)', icon: 'cpu', state: 'running', capacity: { maxRps: 20000, replicas: 8 }, }) .addProcess({ id: 'db', label: 'Posts DB (Postgres + index on (created_at DESC, id DESC))', icon: 'database', state: 'running', capacity: { maxRps: 30000, replicas: 3 }, }) .addProcess({ id: 'ws', label: 'WebSocket gateway (new posts push)', icon: 'queue', state: 'running', }) .autoResize(); // === Edges === // Browser internal topology.connect('viewport', 'observer', { type: 'tcp', label: 'observe(sentinel)' }); topology.connect('observer', 'sentinel', { type: 'tcp', label: 'IntersectionObserver' }); topology.connect('sentinel', 'virtualizer', { type: 'tcp', label: 'fetchNextPage' }); topology.connect('virtualizer', 'cache', { type: 'tcp', label: 'getQueryData / setQueryData' }); topology.connect('viewport', 'history', { type: 'tcp', label: 'pushState / popstate' }); // Browser <-> network topology.connect('cache', 'edge', { type: 'tcp', label: 'GET /v1/feed' }); topology.connect('edge', 'api', { type: 'tcp', label: 'origin fetch (miss)' }); topology.connect('viewport', 'cdn', { type: 'tcp', label: ' (lazy)' }); // Backend topology.connect('api', 'ranking', { type: 'tcp', label: 'rank(user, candidates)' }); topology.connect('ranking', 'db', { type: 'tcp', label: 'WHERE (score, id) < cursor LIMIT 21' }); // Real-time push topology.connect('ws', 'viewport', { type: 'pulse', label: 'new posts notification' }); await topology.apply(); const flow = new FlowBuilder(); // === Scenario 1: Cursor pagination + IntersectionObserver load-more === flow .scenario('cursor-pagination', 'Cursor pagination + IntersectionObserver load-more', 'Initial load + auto-prefetch при подходе к bottom через IntersectionObserver. Cursor = opaque base64 token, стабильный при insert/delete.') .from('viewport').to('cache').showMessage('[MOUNT] useInfiniteQuery({queryKey: ["feed"], cursor: null})') .from('cache').to('edge').showMessage('[CACHE MISS] GET /v1/feed?limit=20 (no cursor = first page)') .from('edge').to('api').showMessage('[EDGE MISS] proxy to origin') .from('api').to('ranking').showMessage('[RANK] score posts for user_id=42, dedup seen items') .from('ranking').to('db').showMessage('[QUERY] SELECT ... ORDER BY score DESC, id DESC LIMIT 21 (+1 for hasMore)') .from('db').to('ranking').showMessage('[RESULT] 21 rows in ~8ms (index seek on (score, id))') .from('ranking').to('api').showMessage('[RANK DONE] return top-20 + nextCursor=base64({score:0.93,id:99887})') .from('api').to('edge').showMessage('[CACHE-CONTROL] s-maxage=10, stale-while-revalidate=60') .from('edge').to('cache').showMessage('[RECV] {items: [20], nextCursor: "eyJzY29yZSI6...", hasMore: true}') .from('cache').to('virtualizer').showMessage('[STORE] queryKey ["feed", null] → page 1') .from('virtualizer').to('viewport').showMessage('[RENDER] virtualizer mounts ONLY 10 visible rows in DOM (not 20)') .from('viewport').to('observer').showMessage('[OBSERVE] IntersectionObserver attached к sentinel

(3 viewports от bottom)') .from('viewport').to('viewport').showMessage('[USER SCROLLS] пользователь скроллит вниз...') .from('observer').to('sentinel').showMessage('[INTERSECT] sentinel вошёл в viewport: isIntersecting=true') .from('sentinel').to('virtualizer').showMessage('[TRIGGER] fetchNextPage({pageParam: nextCursor})') .from('virtualizer').to('cache').showMessage('[QUERY] cache miss for ["feed", "eyJzY29yZSI6..."]') .from('cache').to('edge').showMessage('[FETCH] GET /v1/feed?cursor=eyJzY29yZSI6...&limit=20') .from('edge').to('api').showMessage('[ORIGIN] cursor decoded → WHERE (score, id) < (0.93, 99887)') .from('api').to('ranking').showMessage('[RANK PAGE 2] continue from cursor, no duplicates даже если новые posts появились вверху') .from('ranking').to('db').showMessage('[SEEK] index seek O(log n), не offset scan!') .from('db').to('api').showMessage('[20 MORE]') .from('api').to('cache').showMessage('[APPEND] page 2 added → useInfiniteQuery returns flat array of 40 items') .from('cache').to('virtualizer').showMessage('[REMEASURE] virtualizer пересчитывает totalSize, sentinel сдвигается вниз') .from('virtualizer').to('viewport').showMessage('[SMOOTH] no scroll jump, no layout shift, пользователь не заметил pause'); // === Scenario 2: Virtualization для 10K items === flow .scenario('virtualization-10k', 'Virtualization: 10K items без лагов', 'TanStack Virtual рендерит только видимое окно. 10K rows × 5KB DOM = 50MB без virt → лаг; с virt → ~50 rows = 250KB.') .from('cache').to('virtualizer').showMessage('[DATA] получили 10000 items от useInfiniteQuery (10 пагинаций по 1000)') .from('virtualizer').to('virtualizer').showMessage('[NAIVE] без virt: 10K × 5KB DOM nodes = 50MB heap, scroll FPS ~10-15') .from('virtualizer').to('viewport').showMessage('[VIRT MOUNT] useVirtualizer({count: 10000, estimateSize: () => 200})') .from('virtualizer').to('viewport').showMessage('[RENDER] DOM содержит ОНЛИ 12 visible rows + 5 buffer (overscan)') .from('virtualizer').to('viewport').showMessage('[POSITIONING] absolute positioned, transform: translateY(item.start) для GPU-acceleration') .from('viewport').to('viewport').showMessage('[SCROLL] user scrolls 5000 items вниз') .from('viewport').to('virtualizer').showMessage('[onScroll] scrollTop=1000000px, virtualizer считает visible range') .from('virtualizer').to('viewport').showMessage('[SWAP] unmount items 0-12, mount items 5000-5012 — DOM остаётся ~17 nodes') .from('viewport').to('viewport').showMessage('[FPS] стабильные 60fps, heap = 250KB instead of 50MB') .from('virtualizer').to('virtualizer').showMessage('[VARIABLE HEIGHT] images, expanded text — нужен ResizeObserver для measurement') .from('virtualizer').to('virtualizer').showMessage('[MEASURE] на каждом mount: ref.current.getBoundingClientRect().height → cached') .from('virtualizer').to('viewport').showError('[GOTCHA 1] anchor scroll сдвигается если измеренная height ≠ estimateSize') .flashError('virtualizer') .from('virtualizer').to('virtualizer').showMessage('[FIX] estimateSize должен быть близким к реальному avg, иначе scroll jumps') .from('virtualizer').to('viewport').showError('[GOTCHA 2] key={index} → React reuse-ит wrong components при reorder/insert') .from('virtualizer').to('viewport').showMessage('[FIX] key={item.id} ВСЕГДА. Stable identity = стабильная анимация и focus.') .from('viewport').to('viewport').showMessage('[a11y] virtualization ломает Cmd+F (browser search видит только rendered) — добавить server-side search'); // === Scenario 3: Scroll restoration on back navigation === flow .scenario('scroll-restore', 'Scroll restoration on back navigation', 'Пользователь открыл пост → вернулся назад. Без restoration — лента грузится с нуля и scroll прыгает в top. С restoration — мгновенный return на ту же позицию.') .from('viewport').to('cache').showMessage('[STATE] лента загружена: 5 страниц × 20 items = 100 items, scrollTop = 8500px') .from('viewport').to('viewport').showMessage('[CLICK] пользователь кликает на post #47 → navigate to /posts/47') .from('viewport').to('history').showMessage('[BEFORE NAV] save state in sessionStorage') .from('history').to('cache').showMessage('[SAVE] {scrollTop: 8500, cursor: "page5_cursor", queryKeys: ["feed"], items: 100}') .from('viewport').to('viewport').showMessage('[NAV] /posts/47 mounts, feed unmounts (или keeps alive for SPA)') .from('viewport').to('viewport').showMessage('[USER] reads post, clicks back button') .from('history').to('viewport').showMessage('[POPSTATE] history.back() fires popstate event') .from('history').to('cache').showMessage('[RESTORE] sessionStorage.getItem("feed_state") → {scrollTop, items, cursor}') .from('cache').to('virtualizer').showMessage('[HYDRATE] queryClient.setQueryData(["feed"], cachedItems) — БЕЗ network round-trip') .from('virtualizer').to('viewport').showMessage('[INSTANT MOUNT] 100 items уже в кэше, virtualizer создаёт rows') .from('viewport').to('viewport').showMessage('[SCROLL JUMP] requestAnimationFrame → window.scrollTo({top: 8500, behavior: "instant"})') .from('viewport').to('viewport').showMessage('[t<100ms] пользователь видит ТУ ЖЕ position, как будто back-nav был мгновенным') .from('cache').to('edge').showMessage('[REVALIDATE] в фоне: stale-while-revalidate refetch, чтобы показать новое если есть') .from('edge').to('cache').showMessage('[FRESH DATA] silent update — TanStack Query merges, virtualizer remeasures') .from('viewport').to('viewport').showError('[ANTI-PATTERN] Next.js App Router делает scroll-to-top по умолчанию на клиентских nav!') .flashError('viewport') .from('viewport').to('viewport').showMessage('[FIX] use next/link with scroll={false} + custom scroll restoration hook') .from('viewport').to('viewport').showMessage('[NATIVE] history.scrollRestoration = "manual" даёт ручной контроль (default = "auto")'); // === Scenario 4: Optimistic update + error retry banner === flow .scenario('optimistic-error', 'Optimistic like + error retry banner', 'Пользователь лайкает пост — UI обновляется мгновенно. Сеть фейлит — rollback с visible "Retry" banner, не silent failure.') .from('viewport').to('viewport').showMessage('[CLICK] user taps heart icon on post #99') .from('viewport').to('cache').showMessage('[OPTIMISTIC] queryClient.setQueryData(["feed"], old => increment likes for post#99)') .from('cache').to('viewport').showMessage('[INSTANT UI] heart fills, count 142 → 143 МГНОВЕННО (0ms latency)') .from('viewport').to('edge').showMessage('[MUTATION] POST /v1/posts/99/like (in background)') .from('edge').to('api').showMessage('[ORIGIN]') .from('api').to('api').showError('[TIMEOUT] network slow / api down, request fails after 8s') .flashError('api') .from('api').to('cache').showError('[onError] mutation failed, trigger rollback') .from('cache').to('viewport').showError('[ROLLBACK] revert: count 143 → 142, heart un-fills') .flashError('viewport') .from('viewport').to('viewport').showError('[BANNER] показать toast: "Failed to like. [Retry]" — НЕ silent!') .from('viewport').to('viewport').showMessage('[a11y] aria-live="assertive" чтобы screen reader озвучил error') .from('viewport').to('viewport').showMessage('[USER] клик [Retry] → mutation.retry()') .from('viewport').to('cache').showMessage('[OPTIMISTIC AGAIN] re-apply increment, UI shows 143') .from('cache').to('edge').showMessage('[POST /like] retry attempt 2') .from('edge').to('api').showMessage('[OK 200]') .from('api').to('cache').showMessage('[onSuccess] confirm — invalidate ["feed", "post", 99] для consistency') .from('cache').to('viewport').showMessage('[STABLE] count 143 теперь подтверждено сервером') .from('viewport').to('viewport').showMessage('[RULE] reserved space! не "прыгать" layout при rollback — используй placeholder height') .from('viewport').to('viewport').showMessage('[REAL] Linear, Notion, Slack используют этот паттерн на КАЖДОЙ mutation — instant feel'); // === Scenario 5: Real-time WebSocket new posts pill === flow .scenario('realtime-pill', 'WebSocket new posts: "5 new posts" pill', 'Новые посты прилетают через WS, но НЕ авто-вставляются в feed (теряется scroll context). Показываем pill, по клику — flush + scroll-to-top.') .from('viewport').to('ws').showMessage('[CONNECT] WebSocket open: subscribe(user_id=42, feed=following)') .from('viewport').to('viewport').showMessage('[USER] читает feed, scrollTop = 3000px (далеко от top)') .from('ws').to('viewport').showMessage('[PUSH] new post #50001 from followed user (server event)') .from('viewport').to('cache').showMessage('[QUEUE] добавить в shadow buffer, НЕ в visible feed') .from('ws').to('viewport').showMessage('[PUSH] +4 more posts') .from('viewport').to('viewport').showMessage('[PILL] sticky button сверху: "5 new posts" (fade-in animation)') .from('viewport').to('viewport').showError('[ANTI-PATTERN] auto-insert items вверх → user loses position, frustration') .flashError('viewport') .from('viewport').to('viewport').showMessage('[WHY] insert at top без scroll lock = viewport "прыгает", читаемая строка пропадает') .from('viewport').to('viewport').showMessage('[USER] кликает pill') .from('viewport').to('cache').showMessage('[FLUSH] queryClient.setQueryData → prepend 5 buffered items') .from('cache').to('virtualizer').showMessage('[REMEASURE] virtualizer recalculates positions') .from('virtualizer').to('viewport').showMessage('[SCROLL TO TOP] window.scrollTo({top: 0, behavior: "smooth"})') .from('viewport').to('viewport').showMessage('[FRESH] пользователь видит новые посты СВЕРХУ, scroll position осознанно сброшен (его выбор)') .from('viewport').to('viewport').showMessage('[BACKPRESSURE] если pill не кликнут 5 минут → cap buffer at 100, drop oldest, change label to "100+ new"') .from('ws').to('viewport').showError('[DISCONNECT] WS dropped (mobile network switch)') .flashError('ws') .from('viewport').to('viewport').showMessage('[RECONNECT] exponential backoff 1s, 2s, 4s, max 30s') .from('viewport').to('edge').showMessage('[CATCH-UP] на reconnect: GET /v1/feed?since=lastSeenCursor чтобы не пропустить items') .from('edge').to('viewport').showMessage('[SYNC] missed posts добавлены в pill buffer'); return flow;