feat(activity): virtualize the feed and page on scroll

apps/web/src/features/activity/core/feed-rows.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+import { decodeActivityEvent } from '../queries/decode';
+import { createdEvent, editedEvent } from '../queries/fixtures';
+import { flattenFeed, reuseRows, shouldFetchMore } from './feed-rows';
+
+const created = decodeActivityEvent(createdEvent);
+const edited = decodeActivityEvent(editedEvent);
+
+describe('flattenFeed', () => {
+  it('interleaves day headers and events in order and ends with a tail when more pages exist', () => {
+    const rows = flattenFeed(
+      [
+        { key: 'today', label: 'Today', events: [created] },
+        { key: 'yesterday', label: 'Yesterday', events: [edited] },
+      ],
+      { hasMore: true }
+    );
+    expect(rows.map((row) => row.kind)).toEqual([
+      'day',
+      'event',
+      'day',
+      'event',
+      'tail',
+    ]);
+    expect(rows[0]).toEqual({ kind: 'day', key: 'today', label: 'Today' });
+    expect(rows[1]).toEqual({ kind: 'event', event: created });
+  });
+
+  it('omits the tail on the last page', () => {
+    const rows = flattenFeed(
+      [{ key: 'today', label: 'Today', events: [created] }],
+      { hasMore: false }
+    );
+    expect(rows.map((row) => row.kind)).toEqual(['day', 'event']);
+  });
+});
+
+describe('reuseRows', () => {
+  it('keeps previous row objects for matching keys and adds the rest', () => {
+    const previous = flattenFeed(
+      [{ key: 'today', label: 'Today', events: [created] }],
+      { hasMore: true }
+    );
+    const next = flattenFeed(
+      [
+        { key: 'today', label: 'Today', events: [{ ...created }] },
+        { key: 'yesterday', label: 'Yesterday', events: [edited] },
+      ],
+      { hasMore: false }
+    );
+    const reused = reuseRows(previous, next);
+    expect(reused[0]).toBe(previous[0]);
+    expect(reused[1]).toBe(previous[1]);
+    expect(reused[2]).toBe(next[2]);
+    expect(reused[3]).toBe(next[3]);
+    expect(reused.map((row) => row.kind)).toEqual([
+      'day',
+      'event',
+      'day',
+      'event',
+    ]);
+  });
+});
+
+describe('shouldFetchMore', () => {
+  it.each([
+    // [scrollSize, viewportSize, offset, expected]
+    [3000, 800, 0, false],
+    [3000, 800, 1399, false],
+    [3000, 800, 1400, true],
+    [3000, 800, 2200, true],
+    [500, 800, 0, true],
+    [1000, 50, 800, false],
+    [1000, 50, 850, true],
+  ])(
+    'scrollSize %i viewport %i offset %i -> %s',
+    (scrollSize, viewportSize, offset, expected) => {
+      expect(shouldFetchMore({ scrollSize, viewportSize, offset })).toBe(
+        expected
+      );
+    }
+  );
+});

apps/web/src/features/activity/core/feed-rows.ts

@@ -0,0 +1,72 @@
+import type { ActivityEvent } from './event';
+import type { FeedGroup } from './group-events';
+
+/**
+ * One virtualized row of the Activity screen. The overview card is row zero
+ * so it scrolls with the feed and the virtualizer needs no start margin.
+ */
+export type FeedRow =
+  | { kind: 'overview' }
+  | { kind: 'day'; key: string; label: string }
+  | { kind: 'event'; event: ActivityEvent }
+  | { kind: 'status'; status: 'loading' | 'error' | 'empty' }
+  | { kind: 'tail' };
+
+/** Day headers and their events in order, plus a tail row while more pages exist. */
+export function flattenFeed(
+  groups: FeedGroup[],
+  options: { hasMore: boolean }
+): FeedRow[] {
+  const rows: FeedRow[] = [];
+  for (const group of groups) {
+    rows.push({ kind: 'day', key: group.key, label: group.label });
+    for (const event of group.events) rows.push({ kind: 'event', event });
+  }
+  if (options.hasMore) rows.push({ kind: 'tail' });
+  return rows;
+}
+
+function rowKey(row: FeedRow): string {
+  switch (row.kind) {
+    case 'overview':
+    case 'tail':
+      return row.kind;
+    case 'day':
+      return `day:${row.key}`;
+    case 'event':
+      return `event:${row.event.id}`;
+    case 'status':
+      return `status:${row.status}`;
+  }
+}
+
+/**
+ * Carry previous row objects forward where the key matches, so the list
+ * keys rows by reference and a refetch or a paging flag flip does not
+ * remount every mounted row. Events are immutable once recorded, so a
+ * matching id is a matching row.
+ */
+export function reuseRows(previous: FeedRow[], next: FeedRow[]): FeedRow[] {
+  if (previous.length === 0) return next;
+  const byKey = new Map(previous.map((row) => [rowKey(row), row]));
+  return next.map((row) => byKey.get(rowKey(row)) ?? row);
+}
+
+/** Floor for the near-bottom threshold so tiny viewports still page. */
+const MIN_FETCH_THRESHOLD = 100;
+
+/**
+ * Whether the scroller is within one viewport of its end, the point at which
+ * the next page should start loading so it usually lands before the user
+ * reaches the bottom.
+ */
+export function shouldFetchMore(metrics: {
+  scrollSize: number;
+  viewportSize: number;
+  offset: number;
+}): boolean {
+  const threshold = Math.max(MIN_FETCH_THRESHOLD, metrics.viewportSize);
+  return (
+    metrics.scrollSize - metrics.viewportSize - metrics.offset <= threshold
+  );
+}

apps/web/src/features/activity/primitives/my-activity.test.ts

@@ -10,6 +10,8 @@ afterEach(() => {
   for (const dispose of disposals.splice(0)) dispose();
 });
 
+const settle = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
 function setup() {
   const context = createMockActivityContext();
   let state!: MyActivityState;
@@ -72,6 +74,89 @@ describe('createMyActivityState', () => {
     expect(feed.hasMore).toBe(false);
   });
 
+  it('exposes the overview as row zero and the flattened feed after it', () => {
+    const { state, graphql } = setup();
+    expect(state.rows().map((row) => row.kind)).toEqual(['overview', 'status']);
+
+    graphql.latest('MyActivity').resolve(feedPage([createdEvent], 'c2'));
+    const ready = state.rows();
+    expect(ready.map((row) => row.kind)).toEqual([
+      'overview',
+      'day',
+      'event',
+      'tail',
+    ]);
+
+    state.loadMore();
+    // The in-flight flag flips but the mounted rows keep their identity.
+    expect(state.rows()[1]).toBe(ready[1]);
+    expect(state.rows()[2]).toBe(ready[2]);
+
+    graphql.latest('MyActivity').resolve(feedPage([editedEvent], null));
+    expect(state.rows().map((row) => row.kind)).toEqual([
+      'overview',
+      'day',
+      'event',
+      'event',
+    ]);
+    expect(state.rows()[2]).toBe(ready[2]);
+  });
+
+  it('ignores loadMore while a page is in flight or none remain', () => {
+    const { state, graphql } = setup();
+    graphql.latest('MyActivity').resolve(feedPage([createdEvent], 'c2'));
+    const requests = () =>
+      graphql.pending.filter((op) => op.name === 'MyActivity').length;
+
+    state.loadMore();
+    state.loadMore();
+    expect(requests()).toBe(2);
+
+    graphql.latest('MyActivity').resolve(feedPage([editedEvent], null));
+    state.loadMore();
+    expect(requests()).toBe(2);
+  });
+
+  it('stops auto-paging after a failed page until retryMore', async () => {
+    const { state, graphql } = setup();
+    graphql.latest('MyActivity').resolve(feedPage([createdEvent], 'c2'));
+    const requests = () =>
+      graphql.pending.filter((op) => op.name === 'MyActivity').length;
+
+    state.loadMore();
+    expect(requests()).toBe(2);
+    graphql.latest('MyActivity').fail('boom');
+    // The page observer settles its failure a few microtasks after the result.
+    await settle();
+
+    const feed = state.feed();
+    expect(feed.t).toBe('ready');
+    if (feed.t !== 'ready') return;
+    expect(feed.moreFailed).toBe(true);
+    expect(feed.loadingMore).toBe(false);
+    expect(feed.hasMore).toBe(true);
+
+    // The near-end check keeps firing while the user rests at the bottom;
+    // none of those turn into another request.
+    state.loadMore();
+    state.loadMore();
+    expect(requests()).toBe(2);
+
+    state.retryMore();
+    await settle();
+    expect(requests()).toBe(3);
+    expect(graphql.latest('MyActivity').variables).toEqual({
+      input: { limit: 50, cursor: 'c2' },
+    });
+
+    graphql.latest('MyActivity').resolve(feedPage([editedEvent], null));
+    const after = state.feed();
+    if (after.t !== 'ready') throw new Error('feed should stay ready');
+    expect(after.moreFailed).toBe(false);
+    expect(after.hasMore).toBe(false);
+    expect(after.groups.flatMap((g) => g.events)).toHaveLength(2);
+  });
+
   it('is empty when the first page has no rows', () => {
     const { state, graphql } = setup();
     graphql.latest('MyActivity').resolve(feedPage([]));

apps/web/src/features/activity/primitives/my-activity.ts

@@ -1,6 +1,7 @@
 import { type Accessor, createMemo } from 'solid-js';
 import type { ActivityContext } from '../context/activity-context';
 import type { ActivityOverview } from '../core/event';
+import { type FeedRow, flattenFeed, reuseRows } from '../core/feed-rows';
 import { type FeedGroup, groupEventsByDay } from '../core/group-events';
 import { createMyActivityQuery } from '../queries/feed-query';
 import { createMyActivityOverviewQuery } from '../queries/overview-query';
@@ -9,7 +10,14 @@ export type FeedView =
   | { t: 'loading' }
   | { t: 'error' }
   | { t: 'empty' }
-  | { t: 'ready'; groups: FeedGroup[]; hasMore: boolean; loadingMore: boolean };
+  | {
+      t: 'ready';
+      groups: FeedGroup[];
+      hasMore: boolean;
+      loadingMore: boolean;
+      /** The last next-page request failed; auto-paging waits for `retryMore`. */
+      moreFailed: boolean;
+    };
 
 export type OverviewView =
   | { t: 'loading' }
@@ -19,7 +27,16 @@ export type OverviewView =
 export type MyActivityState = {
   overview: Accessor<OverviewView>;
   feed: Accessor<FeedView>;
+  /** Every virtualized row of the screen: the overview first, then the feed. */
+  rows: Accessor<FeedRow[]>;
+  /**
+   * Fetch the next feed page. No-op while one is in flight, none remain, or
+   * the last attempt failed (so a scroller resting near the end does not
+   * hammer a failing endpoint).
+   */
   loadMore: () => void;
+  /** Retry the failed next page. The one way to page again after a failure. */
+  retryMore: () => void;
 };
 
 /**
@@ -50,16 +67,36 @@ export function createMyActivityState(
         groups: groups(),
         hasMore: feedQuery.hasNextPage,
         loadingMore: feedQuery.isFetchingNextPage,
+        moreFailed: feedQuery.isFetchNextPageError,
       };
     }
     if (feedQuery.isLoading) return { t: 'loading' };
     if (feedQuery.isError) return { t: 'error' };
     return { t: 'empty' };
   });
 
+  const rows = createMemo<FeedRow[]>((previous) => {
+    const current = feed();
+    const feedRows: FeedRow[] =
+      current.t === 'ready'
+        ? flattenFeed(current.groups, { hasMore: current.hasMore })
+        : [{ kind: 'status', status: current.t }];
+    return reuseRows(previous, [{ kind: 'overview' }, ...feedRows]);
+  }, []);
+
+  const fetchNext = () => {
+    if (!feedQuery.hasNextPage || feedQuery.isFetchingNextPage) return;
+    void feedQuery.fetchNextPage();
+  };
+
   return {
     overview,
     feed,
-    loadMore: () => void feedQuery.fetchNextPage(),
+    rows,
+    loadMore: () => {
+      if (feedQuery.isFetchNextPageError) return;
+      fetchNext();
+    },
+    retryMore: fetchNext,
   };
 }