Feed Empty State & Discovery

A new user who signs up, lands on an empty feed, and sees nothing but 'No posts yet' has no path forward and churns within the first session — this is the single largest drop-off point on every social product. Empty feeds are the default state for every new account; treating them as an error case instead of an onboarding opportunity wastes the one moment the user is most willing to click Follow. Activation metrics live or die here.

Detect the zero-state branch inside the feed component and render a composite onboarding block instead of a blank message. Swap the 'No posts' text for a SuggestedUsers list seeded from popular or topically relevant accounts, plus a TrendingPosts strip so the user has something to read while they build their follow graph. Update components/Feed.tsx:

if (posts.length === 0) return (<div><SuggestedUsers limit={5} /><TrendingPosts limit={5} /></div>)

• ID: community-social-engagement.activity-feeds.empty-state-onboarding

• Severity: low

• What to look for: Enumerate all relevant files and Examine the feed component for an empty state (when the user follows no one, or follows only inactive users). Look for fallback UI: a "Start Following" call-to-action, "Suggested Users" section, or "Trending Content" injection. Check whether new users are guided toward discoverable content.

• Pass criteria: At least 1 conforming pattern must exist. Empty feed state has a meaningful fallback UI: suggested users, trending posts, or onboarding guidance. Users aren't left with a blank feed.

• Fail criteria: Empty feed shows nothing, or just a "No posts" message with no action.

• Skip (N/A) when: Platform architecture doesn't require feed engagement onboarding (e.g., internal tool).

• Detail on fail: "Feed is empty for new users with no suggestions — no path to discovery" or "Empty state shows only 'No posts' text"

• Remediation: Add suggested content to empty feeds:

  // components/Feed.tsx
  export function Feed({ posts, isAuthor }) {
    if (posts.length === 0) {
      return (
        <div className="empty-state">
          <p>You haven't followed anyone yet.</p>
          <SuggestedUsers limit={5} />
          <TrendingPosts limit={5} />
        </div>
      )
    }
  
    return <div className="feed">{/* ... render posts ... */}</div>
  }