Design a Social Feed (Facebook/Instagram)

1
interface FanoutRouter {
2
  routePost(post: Post, author: User): FanoutStrategy
3
}
4

5
type FanoutStrategy =
6
  | { type: "push"; followers: string[] }
7
  | { type: "pull"; authorId: string }
8
  | { type: "hybrid"; pushTo: string[]; markForPull: boolean }

1
{
2
  "posts": [
3
    {
4
      "id": "post_abc123",
5
      "author": {
6
        "id": "user_456",
7
        "username": "johndoe",
8
        "displayName": "John Doe",
9
        "avatarUrl": "https://cdn.example.com/avatars/456.jpg",
10
        "isVerified": true
11
      },
12
      "content": {
13
        "type": "image",
14
        "text": "Beautiful sunset! 🌅",
15
        "media": [
16
          {
17
            "id": "media_789",
18
            "type": "image",
19
            "url": "https://cdn.example.com/posts/789.jpg",
20
            "thumbnailUrl": "https://cdn.example.com/posts/789_thumb.jpg",
21
            "width": 1080,
22
            "height": 1350,
23
            "altText": "Sunset over the ocean"
24
          }
25
        ]
26
      },
27
      "engagement": {
28
        "likeCount": 1542,
29
        "commentCount": 89,
30
        "shareCount": 23,
31
        "viewCount": 12450,
32
        "isLiked": false,
33
        "isSaved": false
34
      },
35
      "ranking": {
36
        "score": 0.89,
37
        "reason": "friend_interaction"
38
      },
39
      "createdAt": "2024-02-03T10:30:00Z",
40
      "visibility": "public"
41
    }
42
  ],
43
  "pagination": {
44
    "nextCursor": "eyJ0IjoxNzA2ODg2NDAwfQ",
45
    "hasMore": true
46
  },
47
  "meta": {
48
    "feedType": "ranked",
49
    "generatedAt": "2024-02-03T12:00:00Z"
50
  }
51
}

1
{
2
  "content": {
3
    "text": "Hello world!",
4
    "mediaIds": ["upload_123", "upload_456"]
5
  },
6
  "visibility": "public",
7
  "allowComments": true,
8
  "allowSharing": true,
9
  "location": {
10
    "latitude": 37.7749,
11
    "longitude": -122.4194,
12
    "name": "San Francisco, CA"
13
  }
14
}

1
{
2
  "id": "post_new789",
3
  "author": {
4
    "id": "user_123",
5
    "username": "currentuser"
6
  },
7
  "content": {
8
    "text": "Hello world!",
9
    "media": [...]
10
  },
11
  "createdAt": "2024-02-03T12:05:00Z",
12
  "visibility": "public",
13
  "fanoutStatus": "pending"
14
}

1
event: new_post
2
data: {"postId": "post_xyz", "authorId": "user_456", "preview": "Check out..."}
3

4
event: engagement_update
5
data: {"postId": "post_abc", "likeCount": 1543, "commentCount": 90}
6

7
event: post_removed
8
data: {"postId": "post_old", "reason": "author_deleted"}

1
{
2
  "liked": true,
3
  "likeCount": 1543,
4
  "timestamp": "2024-02-03T12:10:00Z"
5
}

1
{
2
  "comments": [
3
    {
4
      "id": "comment_123",
5
      "author": {
6
        "id": "user_789",
7
        "username": "commenter",
8
        "avatarUrl": "..."
9
      },
10
      "text": "Great post!",
11
      "likeCount": 45,
12
      "replyCount": 3,
13
      "isLiked": false,
14
      "createdAt": "2024-02-03T10:35:00Z",
15
      "replies": []
16
    }
17
  ],
18
  "pagination": {
19
    "nextCursor": "...",
20
    "hasMore": true
21
  },
22
  "totalCount": 89
23
}

1
CREATE TABLE objects (
2
    id BIGINT PRIMARY KEY,
3
    type VARCHAR(50) NOT NULL,
4
    data BLOB,
5
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
6
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
7
    INDEX idx_type_created (type, created_at)
8
);

1
CREATE TABLE associations (
2
    id1 BIGINT NOT NULL,
3
    assoc_type VARCHAR(50) NOT NULL,
4
    id2 BIGINT NOT NULL,
5
    time BIGINT NOT NULL,
6
    data BLOB,
7
    PRIMARY KEY (id1, assoc_type, id2),
8
    INDEX idx_id1_type_time (id1, assoc_type, time DESC)
9
);

1
# Pre-computed feed (sorted set)
2
# Score = ranking score or timestamp
3
ZADD feed:{user_id} {score} {post_id}
4

5
# Keep last 500 posts per feed
6
ZREMRANGEBYRANK feed:{user_id} 0 -501
7

8
# Feed metadata (hash)
9
HSET feed:meta:{user_id}
10
    last_generated 1706886400000
11
    version 42
12
    type "ranked"
13

14
# Celebrity posts index (for pull-based merging)
15
ZADD celebrity_posts:{author_id} {timestamp} {post_id}
16

17
# User's recent engagement (for ranking features)
18
ZADD user:engaged:{user_id} {timestamp} {post_id}
19
EXPIRE user:engaged:{user_id} 604800  # 7 days

1
interface PostIndex {
2
  // Posts by author, sorted by time (descending)
3
  authorIndex: Map<UserId, SortedSet<PostId, Timestamp>>
4

5
  // Posts by visibility for filtering
6
  visibilityIndex: Map<Visibility, Set<PostId>>
7

8
  // Recent posts global index (for trending)
9
  recentPosts: SortedSet<PostId, Timestamp>
10
}
11

12
interface SortedSet<K, S> {
13
  add(key: K, score: S): void
14
  range(start: S, end: S, limit: number): K[]
15
  remove(key: K): void
16
}

1
-- Users table
2
CREATE TABLE users (
3
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
4
    username VARCHAR(50) UNIQUE NOT NULL,
5
    display_name VARCHAR(100),
6
    email VARCHAR(255) UNIQUE NOT NULL,
7
    password_hash VARCHAR(255) NOT NULL,
8
    avatar_url TEXT,
9
    bio TEXT,
10
    follower_count INT DEFAULT 0,
11
    following_count INT DEFAULT 0,
12
    post_count INT DEFAULT 0,
13
    is_verified BOOLEAN DEFAULT FALSE,
14
    is_celebrity BOOLEAN DEFAULT FALSE,  -- >10K followers
15
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
16
    INDEX idx_username (username),
17
    INDEX idx_email (email)
18
) ENGINE=InnoDB;
19

20
-- Posts table
21
CREATE TABLE posts (
22
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
23
    author_id BIGINT NOT NULL,
24
    content_text TEXT,
25
    content_type ENUM('text', 'image', 'video', 'link') NOT NULL,
26
    visibility ENUM('public', 'friends', 'private') DEFAULT 'public',
27
    like_count INT DEFAULT 0,
28
    comment_count INT DEFAULT 0,
29
    share_count INT DEFAULT 0,
30
    view_count INT DEFAULT 0,
31
    is_deleted BOOLEAN DEFAULT FALSE,
32
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
33
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
34
    INDEX idx_author_created (author_id, created_at DESC),
35
    INDEX idx_created (created_at DESC),
36
    FOREIGN KEY (author_id) REFERENCES users(id)
37
) ENGINE=InnoDB;
38

39
-- Social graph (follow relationships)
40
CREATE TABLE follows (
41
    follower_id BIGINT NOT NULL,
42
    followee_id BIGINT NOT NULL,
43
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
44
    PRIMARY KEY (follower_id, followee_id),
45
    INDEX idx_followee (followee_id),
46
    FOREIGN KEY (follower_id) REFERENCES users(id),
47
    FOREIGN KEY (followee_id) REFERENCES users(id)
48
) ENGINE=InnoDB;
49

50
-- Engagement (likes, saves)
51
CREATE TABLE post_likes (
52
    user_id BIGINT NOT NULL,
53
    post_id BIGINT NOT NULL,
54
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
55
    PRIMARY KEY (user_id, post_id),
56
    INDEX idx_post (post_id),
57
    FOREIGN KEY (user_id) REFERENCES users(id),
58
    FOREIGN KEY (post_id) REFERENCES posts(id)
59
) ENGINE=InnoDB;

12 collapsed lines
1
class CandidateRetriever {
2
  private readonly leafClient: LeafClient
3
  private readonly taoClient: TAOClient
4
  private readonly redis: RedisCluster
5

6
  async getCandidates(userId: string): Promise<CandidateSet> {
7
    // 1. Get user's followees
8
    const followees = await this.taoClient.getAssociations(userId, "follows", { limit: 5000 })
9

10
    // 2. Fetch recent posts from each followee (parallel)
11
    const postPromises = followees.map((followee) =>
12
      this.leafClient.getAuthorPosts(followee.id2, {
13
        since: Date.now() - 7 * 24 * 60 * 60 * 1000, // 7 days
14
        limit: 50,
15
      }),
16
    )
17

18
    const postsByAuthor = await Promise.all(postPromises)
19

20
    // 3. Fetch celebrity posts for pull-based merging
21
    const celebrityFollowees = followees.filter((f) => f.data.isCelebrity)
22
    const celebrityPosts = await this.getCelebrityPosts(celebrityFollowees.map((f) => f.id2))
23

24
    // 4. Merge and deduplicate
25
    const allPosts = [...postsByAuthor.flat(), ...celebrityPosts]
26

27
    // 5. Apply eligibility filters
28
    const eligible = await this.filterEligible(userId, allPosts)
29

30
    return {
31
      candidates: eligible,
32
      source: {
33
        fromCache: postsByAuthor.length,
34
        fromCelebrity: celebrityPosts.length,
35
      },
36
    }
37
  }
38

39
  private async filterEligible(userId: string, posts: Post[]): Promise<Post[]> {
40
    // Filter out: blocked authors, hidden posts, already seen
41
    const [blocked, hidden, seen] = await Promise.all([
42
      this.taoClient.getAssociations(userId, "blocks"),
43
      this.redis.smembers(`hidden:${userId}`),
44
      this.redis.smembers(`seen:${userId}`),
45
    ])
46

47
    const blockedSet = new Set(blocked.map((b) => b.id2))
48
    const hiddenSet = new Set(hidden)
49
    const seenSet = new Set(seen)
50

51
    return posts.filter(
52
      (post) =>
53
        !blockedSet.has(post.authorId) &&
54
        !hiddenSet.has(post.id) &&
55
        !seenSet.has(post.id) &&
56
        this.checkVisibility(userId, post),
57
    )
58
  }
59
}

15 collapsed lines
1
class FeedRanker {
2
  private readonly featureStore: FeatureStore
3
  private readonly modelServer: ModelServer
4

5
  async rank(userId: string, candidates: Post[]): Promise<RankedPost[]> {
6
    // Stage 1: First-pass lightweight ranking
7
    const stage1 = await this.firstPassRank(userId, candidates)
8
    const top500 = stage1.slice(0, 500)
9

10
    // Stage 2: Second-pass neural network
11
    const stage2 = await this.secondPassRank(userId, top500)
12
    const top100 = stage2.slice(0, 100)
13

14
    // Stage 3: Final reranking with diversity
15
    const final = await this.finalRerank(userId, top100)
16

17
    return final.slice(0, 50)
18
  }
19

20
  private async firstPassRank(userId: string, candidates: Post[]): Promise<RankedPost[]> {
21
    // Lightweight features (can compute in-process)
22
    const features = candidates.map((post) => ({
23
      postId: post.id,
24
      recency: this.computeRecency(post.createdAt),
25
      authorAffinity: this.getAuthorAffinity(userId, post.authorId),
26
      contentType: post.contentType,
27
      engagementVelocity: this.getEngagementVelocity(post),
28
    }))
29

30
    // Simple linear model for speed
31
    const scores = features.map(
32
      (f) =>
33
        0.3 * f.recency +
34
        0.4 * f.authorAffinity +
35
        0.2 * f.engagementVelocity +
36
        0.1 * this.contentTypeBoost(f.contentType),
37
    )
38

39
    return this.sortByScore(candidates, scores)
40
  }
41

42
  private async secondPassRank(userId: string, candidates: Post[]): Promise<RankedPost[]> {
43
    // Fetch rich features from feature store
44
    const features = await this.featureStore.getBatch(
45
      candidates.map((c) => ({
46
        userId,
47
        postId: c.id,
48
        authorId: c.authorId,
49
      })),
50
    )
51

52
    // Neural network scoring
53
    const scores = await this.modelServer.predict("feed_ranking_v2", features)
54

55
    return this.sortByScore(candidates, scores)
56
  }
57

58
  private async finalRerank(userId: string, candidates: RankedPost[]): Promise<RankedPost[]> {
59
    // Apply diversity rules
60
    const diversified = this.applyDiversity(candidates, {
61
      maxPerAuthor: 2,
62
      contentTypeMix: { image: 0.4, video: 0.3, text: 0.3 },
63
      maxAds: 3,
64
    })
65

66
    // Apply integrity filters (misinformation, policy violations)
67
    const filtered = await this.applyIntegrityFilters(diversified)
68

69
    return filtered
70
  }
71

72
  private applyDiversity(posts: RankedPost[], rules: DiversityRules): RankedPost[] {
73
    const result: RankedPost[] = []
74
    const authorCounts = new Map<string, number>()
75
    const typeCounts = new Map<string, number>()
76

77
    for (const post of posts) {
78
      const authorCount = authorCounts.get(post.authorId) || 0
79
      if (authorCount >= rules.maxPerAuthor) continue
80

81
      // Check content type distribution
82
      const typeCount = typeCounts.get(post.contentType) || 0
83
      const typeRatio = typeCount / (result.length + 1)
84
      const maxRatio = rules.contentTypeMix[post.contentType] || 0.5
85
      if (typeRatio > maxRatio && result.length > 10) continue
86

87
      result.push(post)
88
      authorCounts.set(post.authorId, authorCount + 1)
89
      typeCounts.set(post.contentType, typeCount + 1)
90
    }
91

92
    return result
93
  }
94
}

20 collapsed lines
1
class FanoutService {
2
  private readonly CELEBRITY_THRESHOLD = 10_000
3
  private readonly BATCH_SIZE = 1000
4

5
  async fanoutPost(post: Post, author: User): Promise<FanoutResult> {
6
    const followerCount = author.followerCount
7

8
    if (followerCount < this.CELEBRITY_THRESHOLD) {
9
      return this.pushFanout(post, author)
10
    } else if (followerCount < 1_000_000) {
11
      return this.hybridFanout(post, author)
12
    } else {
13
      return this.pullOnly(post, author)
14
    }
15
  }
16

17
  private async pushFanout(post: Post, author: User): Promise<FanoutResult> {
18
    // Get all followers
19
    const followers = await this.getFollowers(author.id)
20

21
    // Process in batches to avoid memory pressure
22
    const batches = this.chunk(followers, this.BATCH_SIZE)
23
    let written = 0
24

25
    for (const batch of batches) {
26
      const pipeline = this.redis.pipeline()
27

28
      for (const followerId of batch) {
29
        // Add to follower's feed with timestamp score
30
        pipeline.zadd(`feed:${followerId}`, post.createdAt.getTime(), post.id)
31
        // Trim to max 500 posts
32
        pipeline.zremrangebyrank(`feed:${followerId}`, 0, -501)
33
      }
34

35
      await pipeline.exec()
36
      written += batch.length
37

38
      // Emit progress for monitoring
39
      this.metrics.increment("fanout.writes", batch.length)
40
    }
41

42
    return {
43
      strategy: "push",
44
      followersReached: written,
45
      duration: Date.now() - post.createdAt.getTime(),
46
    }
47
  }
48

49
  private async hybridFanout(post: Post, author: User): Promise<FanoutResult> {
50
    // Get active followers (engaged in last 7 days)
51
    const activeFollowers = await this.getActiveFollowers(author.id, 7)
52

53
    // Push to active followers only
54
    const pushResult = await this.pushToFollowers(post, activeFollowers)
55

56
    // Mark post for pull-based retrieval by inactive followers
57
    await this.redis.zadd(`celebrity_posts:${author.id}`, post.createdAt.getTime(), post.id)
58
    await this.redis.expire(`celebrity_posts:${author.id}`, 7 * 24 * 60 * 60)
59

60
    return {
61
      strategy: "hybrid",
62
      pushed: pushResult.count,
63
      markedForPull: author.followerCount - activeFollowers.length,
64
    }
65
  }
66

67
  private async pullOnly(post: Post, author: User): Promise<FanoutResult> {
68
    // Only index for pull-based retrieval
69
    await this.redis.zadd(`celebrity_posts:${author.id}`, post.createdAt.getTime(), post.id)
70

71
    // Update author's post index
72
    await this.leafClient.indexPost(post)
73

74
    return {
75
      strategy: "pull",
76
      indexed: true,
77
    }
78
  }
79
}

15 collapsed lines
1
class TAOCache {
2
  private readonly leaseTimeout = 10_000 // 10 seconds
3

4
  async get(id1: string, assocType: string): Promise<Association[] | null> {
5
    // Try follower cache first
6
    const followerResult = await this.followerCache.get(this.cacheKey(id1, assocType))
7

8
    if (followerResult) {
9
      this.metrics.increment("cache.hit.follower")
10
      return followerResult
11
    }
12

13
    // Try leader cache
14
    const leaderResult = await this.leaderCache.get(this.cacheKey(id1, assocType))
15

16
    if (leaderResult) {
17
      this.metrics.increment("cache.hit.leader")
18
      // Populate follower cache
19
      await this.followerCache.set(this.cacheKey(id1, assocType), leaderResult, { ttl: 300 })
20
      return leaderResult
21
    }
22

23
    // Cache miss - fetch from MySQL with lease
24
    return this.fetchWithLease(id1, assocType)
25
  }
26

27
  private async fetchWithLease(id1: string, assocType: string): Promise<Association[]> {
28
    const leaseKey = `lease:${id1}:${assocType}`
29

30
    // Try to acquire lease
31
    const acquired = await this.redis.set(leaseKey, "1", "NX", "PX", this.leaseTimeout)
32

33
    if (!acquired) {
34
      // Another request is fetching - wait and retry
35
      await this.sleep(100)
36
      return this.get(id1, assocType)
37
    }
38

39
    try {
40
      // Fetch from MySQL
41
      const data = await this.mysql.query(
42
        `SELECT * FROM associations
43
         WHERE id1 = ? AND assoc_type = ?
44
         ORDER BY time DESC`,
45
        [id1, assocType],
46
      )
47

48
      // Populate both cache tiers
49
      await Promise.all([
50
        this.leaderCache.set(this.cacheKey(id1, assocType), data, { ttl: 3600 }),
51
        this.followerCache.set(this.cacheKey(id1, assocType), data, { ttl: 300 }),
52
      ])
53

54
      return data
55
    } finally {
56
      // Release lease
57
      await this.redis.del(leaseKey)
58
    }
59
  }
60

61
  async invalidate(id1: string, assocType: string): Promise<void> {
62
    // Delete from both tiers
63
    const key = this.cacheKey(id1, assocType)
64
    await Promise.all([this.followerCache.del(key), this.leaderCache.del(key)])
65
  }
66
}

12 collapsed lines
1
class EngagementService {
2
  private readonly FLUSH_INTERVAL = 5000 // 5 seconds
3
  private pendingUpdates = new Map<string, EngagementDelta>()
4

5
  async incrementLike(postId: string): Promise<void> {
6
    // Immediate Redis increment for read consistency
7
    await this.redis.hincrby(`post:${postId}`, "like_count", 1)
8

9
    // Buffer MySQL update
10
    this.bufferUpdate(postId, { likes: 1 })
11
  }
12

13
  private bufferUpdate(postId: string, delta: EngagementDelta): void {
14
    const existing = this.pendingUpdates.get(postId) || {
15
      likes: 0,
16
      comments: 0,
17
      shares: 0,
18
    }
19

20
    this.pendingUpdates.set(postId, {
21
      likes: existing.likes + (delta.likes || 0),
22
      comments: existing.comments + (delta.comments || 0),
23
      shares: existing.shares + (delta.shares || 0),
24
    })
25
  }
26

27
  // Periodic flush to MySQL
28
  @Scheduled(FLUSH_INTERVAL)
29
  async flushToMySQL(): Promise<void> {
30
    const updates = new Map(this.pendingUpdates)
31
    this.pendingUpdates.clear()
32

33
    const queries = Array.from(updates.entries()).map(([postId, delta]) =>
34
      this.mysql.query(
35
        `UPDATE posts SET
36
          like_count = like_count + ?,
37
          comment_count = comment_count + ?,
38
          share_count = share_count + ?
39
         WHERE id = ?`,
40
        [delta.likes, delta.comments, delta.shares, postId],
41
      ),
42
    )
43

44
    await Promise.all(queries)
45
  }
46
}

15 collapsed lines
1
interface VirtualFeedConfig {
2
  containerHeight: number
3
  estimatedItemHeight: number
4
  overscan: number // Extra items above/below viewport
5
}
6

7
class VirtualFeed {
8
  private heightCache = new Map<string, number>()
9
  private offsetCache: number[] = []
10

11
  calculateVisibleRange(scrollTop: number, posts: Post[]): { start: number; end: number } {
12
    // Binary search for start index
13
    let start = this.binarySearchOffset(scrollTop - this.config.overscan * 300)
14

15
    // Calculate end based on viewport
16
    let accumulatedHeight = this.offsetCache[start] || 0
17
    let end = start
18

19
    while (
20
      end < posts.length &&
21
      accumulatedHeight < scrollTop + this.config.containerHeight + this.config.overscan * 300
22
    ) {
23
      accumulatedHeight += this.getItemHeight(posts[end])
24
      end++
25
    }
26

27
    return { start, end }
28
  }
29

30
  private getItemHeight(post: Post): number {
31
    // Check cache first
32
    if (this.heightCache.has(post.id)) {
33
      return this.heightCache.get(post.id)!
34
    }
35

36
    // Estimate based on content type
37
    let estimate = 100 // Base height
38
    if (post.content.media?.length > 0) {
39
      estimate += 400 // Image/video
40
    }
41
    if (post.content.text?.length > 200) {
42
      estimate += 50 // Long text
43
    }
44

45
    return estimate
46
  }
47

48
  // Called after actual render to update height cache
49
  onItemRendered(postId: string, actualHeight: number): void {
50
    this.heightCache.set(postId, actualHeight)
51
    this.rebuildOffsetCache()
52
  }
53
}

10 collapsed lines
1
class FeedStore {
2
  private posts = new Map<string, Post>()
3
  private pendingLikes = new Set<string>()
4

5
  async likePost(postId: string): Promise<void> {
6
    const post = this.posts.get(postId)
7
    if (!post || this.pendingLikes.has(postId)) return
8

9
    // Optimistic update
10
    this.pendingLikes.add(postId)
11
    this.updatePost(postId, {
12
      engagement: {
13
        ...post.engagement,
14
        likeCount: post.engagement.likeCount + 1,
15
        isLiked: true,
16
      },
17
    })
18

19
    // Re-render immediately
20
    this.notifySubscribers(postId)
21

22
    try {
23
      await this.api.likePost(postId)
24
    } catch (error) {
25
      // Rollback on failure
26
      this.updatePost(postId, {
27
        engagement: {
28
          ...post.engagement,
29
          likeCount: post.engagement.likeCount,
30
          isLiked: false,
31
        },
32
      })
33
      this.notifySubscribers(postId)
34
    } finally {
35
      this.pendingLikes.delete(postId)
36
    }
37
  }
38
}

12 collapsed lines
1
class FeedStreamManager {
2
  private eventSource: EventSource | null = null
3
  private reconnectAttempt = 0
4

5
  connect(userId: string): void {
6
    this.eventSource = new EventSource(`/api/v1/feed/stream?userId=${userId}`)
7

8
    this.eventSource.addEventListener("new_post", (event) => {
9
      const data = JSON.parse(event.data)
10
      this.onNewPost(data)
11
    })
12

13
    this.eventSource.addEventListener("engagement_update", (event) => {
14
      const data = JSON.parse(event.data)
15
      this.onEngagementUpdate(data)
16
    })
17

18
    this.eventSource.onerror = () => {
19
      this.scheduleReconnect()
20
    }
21
  }
22

23
  private onNewPost(data: NewPostEvent): void {
24
    // Show "New posts available" indicator instead of auto-inserting
25
    // This prevents jarring scroll position changes
26
    this.feedStore.setPendingPosts(data.count)
27
    this.ui.showNewPostsIndicator()
28
  }
29

30
  private onEngagementUpdate(data: EngagementUpdateEvent): void {
31
    // Update counts in place (non-disruptive)
32
    this.feedStore.updateEngagement(data.postId, data)
33
  }
34

35
  loadNewPosts(): void {
36
    // User clicked "Show new posts"
37
    const pending = this.feedStore.getPendingPosts()
38
    this.feedStore.prependPosts(pending)
39
    this.feedStore.clearPendingPosts()
40
    this.ui.scrollToTop()
41
  }
42
}

10 collapsed lines
1
class FeedPrefetcher {
2
  private readonly PREFETCH_THRESHOLD = 5 // Posts from bottom
3

4
  onScroll(visibleRange: { start: number; end: number }, totalPosts: number): void {
5
    const postsRemaining = totalPosts - visibleRange.end
6

7
    if (postsRemaining < this.PREFETCH_THRESHOLD && !this.loading) {
8
      this.prefetchNextPage()
9
    }
10
  }
11

12
  private async prefetchNextPage(): Promise<void> {
13
    this.loading = true
14

15
    try {
16
      const cursor = this.feedStore.getNextCursor()
17
      const response = await this.api.getFeed({ cursor, limit: 20 })
18

19
      // Add to store but don't re-render yet
20
      this.feedStore.appendPosts(response.posts)
21
      this.feedStore.setNextCursor(response.pagination.nextCursor)
22
    } finally {
23
      this.loading = false
24
    }
25
  }
26
}