@@ -111,6 +111,8 @@ export interface FeedProps<T>
   skipFirstAd?: boolean;
   /** The surface leads with a featured card, so keep wide ones out of row one. */
   deferWideCards?: boolean;
+  /** Posts a surface above the feed already shows, kept out of the grid. */
+  excludedPostIds?: string[];
   staticAd?: { ad: Ad; index: number };
   disableAdRefresh?: boolean;
   allowFetchMore?: boolean;
@@ -213,6 +215,7 @@ export default function Feed<T>({
   disableTopHero,
   skipFirstAd,
   deferWideCards,
+  excludedPostIds,
   staticAd,
   disableAdRefresh = false,
   allowFetchMore,
@@ -380,6 +383,7 @@ export default function Feed<T>({
         disableHighlightCards,
         skipFirstAd,
         deferWideCards,
+        excludedPostIds,
         staticAd,
         adPostLength: isSquadFeed ? 2 : undefined,
         feedName,
 
@@ -1,16 +1,9 @@
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import type { Post } from '../../../graphql/posts';
-import { gqlClient } from '../../../graphql/common';
-import type { FeedHeroData } from '../../../graphql/feed';
-import { FEED_HERO_QUERY, baseFeedSupportedTypes } from '../../../graphql/feed';
 import type { PostHighlight } from '../../../graphql/highlights';
 import type { ViewabilityData } from '../../../features/monetization/viewability';
 import { viewabilityLogExtra } from '../../../features/monetization/viewability';
-import { useAuthContext } from '../../../contexts/AuthContext';
 import { useLogContext } from '../../../contexts/LogContext';
-import { useCopyLink } from '../../../hooks/useCopy';
 import { ImpressionStatus } from '../../../hooks/feed/useLogImpression';
 import {
   adLogEvent,
@@ -19,11 +12,10 @@ import {
 } from '../../../lib/feed';
 import { AdActions } from '../../../lib/ads';
 import { LogEvent, Origin } from '../../../lib/log';
-import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';
 import { FeedHeroSection } from './FeedHeroSection';
 import { useFeedHeroAd } from './useFeedHeroAd';
-import { useFeedHeroPostActions } from './useFeedHeroPostActions';
-import { useCachedTokenRecovery } from '../../../hooks/useCachedTokenRecovery';
+import { useFeedHeroData } from './useFeedHeroData';
+import { useFeedHeroCardProps } from './useFeedHeroCardProps';
 
 /**
  * The carousel and the Happening Now list are two lists, not one: `feedHero`
@@ -48,42 +40,13 @@ export const FeedHero = ({
    */
   onRenderedChange?: (isRendered: boolean) => void;
 }): ReactElement | null => {
-  const { user, isTokenValid } = useAuthContext();
   const { logEvent } = useLogContext();
   const postLogEvent = usePostLogEvent();
-  const [, copyLink] = useCopyLink();
 
   const { ad, placement, shape } = useFeedHeroAd();
 
-  const queryKey = useMemo(
-    () => generateQueryKey(RequestKey.FeedHero, user),
-    [user],
-  );
-  // Vote and bookmark patch the hero's own query: the bare hooks only write the
-  // single-post key, which these cards never read.
-  const { toggleUpvote, toggleDownvote, toggleBookmark } =
-    useFeedHeroPostActions({
-      queryKey,
-      feedName,
-      origin: Origin.FeedHero,
-    });
-
-  const { data: hero } = useQuery({
-    queryKey,
-    queryFn: () =>
-      gqlClient.request<FeedHeroData>(FEED_HERO_QUERY, {
-        loggedIn: !!user,
-        supportedTypes: baseFeedSupportedTypes,
-      }),
-    enabled: isTokenValid,
-    // The same window `majorHeadlinesQueryOptions` gives the in-feed card, so
-    // the two surfaces the experiment compares are equally fresh.
-    staleTime: StaleTime.OneMinute,
-  });
-  useCachedTokenRecovery({ queryKey, enabled: isTokenValid });
-
-  const highlights = useMemo(() => hero?.feedHero?.highlights ?? [], [hero]);
-  const posts: Post[] = useMemo(() => hero?.feedHero?.posts ?? [], [hero]);
+  const { queryKey, posts, highlights } = useFeedHeroData();
+  const cardProps = useFeedHeroCardProps({ queryKey, feedName });
 
   const isRendered = posts.length > 0;
   const adPlacement = isRendered ? placement : 'none';
@@ -153,33 +116,6 @@ export const FeedHero = ({
     ad.impressionStatus = ImpressionStatus.LOGGED;
   }, [ad, isAdShown, onAdAction]);
 
-  const cardProps = useMemo(
-    () => ({
-      onPostClick: (post: Post) =>
-        logEvent(
-          postLogEvent(LogEvent.Click, post, {
-            extra: { origin: Origin.FeedHero },
-          }),
-        ),
-      onUpvoteClick: (post: Post, origin = Origin.FeedHero) =>
-        toggleUpvote({ payload: post, origin }),
-      onDownvoteClick: (post: Post, origin = Origin.FeedHero) =>
-        toggleDownvote({ payload: post, origin }),
-      onBookmarkClick: (post: Post, origin = Origin.FeedHero) =>
-        toggleBookmark({ post, origin }),
-      onCopyLinkClick: (_: React.MouseEvent, post: Post) =>
-        copyLink({ link: post.commentsPermalink }),
-    }),
-    [
-      copyLink,
-      logEvent,
-      postLogEvent,
-      toggleBookmark,
-      toggleDownvote,
-      toggleUpvote,
-    ],
-  );
-
   if (!isRendered) {
     return null;
   }
 
@@ -0,0 +1,60 @@
+import type { MouseEvent } from 'react';
+import { useMemo } from 'react';
+import type { QueryKey } from '@tanstack/react-query';
+import type { Post } from '../../../graphql/posts';
+import type { FeaturedWideCardProps } from '../../cards/common/featuredWide';
+import { useLogContext } from '../../../contexts/LogContext';
+import { useCopyLink } from '../../../hooks/useCopy';
+import { usePostLogEvent } from '../../../lib/feed';
+import { LogEvent, Origin } from '../../../lib/log';
+import { useFeedHeroPostActions } from './useFeedHeroPostActions';
+
+/**
+ * The handlers the hero's cards take, logged under `Origin.FeedHero`. Vote
+ * and bookmark patch the hero's own query: the bare hooks only write the
+ * single-post key, which these cards never read.
+ */
+export const useFeedHeroCardProps = ({
+  queryKey,
+  feedName,
+}: {
+  queryKey: QueryKey;
+  feedName: string;
+}): Omit<FeaturedWideCardProps, 'post'> => {
+  const { logEvent } = useLogContext();
+  const postLogEvent = usePostLogEvent();
+  const [, copyLink] = useCopyLink();
+  const { toggleUpvote, toggleDownvote, toggleBookmark } =
+    useFeedHeroPostActions({
+      queryKey,
+      feedName,
+      origin: Origin.FeedHero,
+    });
+
+  return useMemo(
+    () => ({
+      onPostClick: (post: Post) =>
+        logEvent(
+          postLogEvent(LogEvent.Click, post, {
+            extra: { origin: Origin.FeedHero },
+          }),
+        ),
+      onUpvoteClick: (post: Post, origin = Origin.FeedHero) =>
+        toggleUpvote({ payload: post, origin }),
+      onDownvoteClick: (post: Post, origin = Origin.FeedHero) =>
+        toggleDownvote({ payload: post, origin }),
+      onBookmarkClick: (post: Post, origin = Origin.FeedHero) =>
+        toggleBookmark({ post, origin }),
+      onCopyLinkClick: (_: MouseEvent, post: Post) =>
+        copyLink({ link: post.commentsPermalink }),
+    }),
+    [
+      copyLink,
+      logEvent,
+      postLogEvent,
+      toggleBookmark,
+      toggleDownvote,
+      toggleUpvote,
+    ],
+  );
+};
@@ -0,0 +1,66 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import nock from 'nock';
+import { renderHook, waitFor } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import basePost from '../../../../__tests__/fixture/post';
+import { TestBootProvider } from '../../../../__tests__/helpers/boot';
+import { mockGraphQL } from '../../../../__tests__/helpers/graphql';
+import { FEED_HERO_QUERY, baseFeedSupportedTypes } from '../../../graphql/feed';
+import { storageWrapper } from '../../../lib/storageWrapper';
+import { generateStorageKey, StorageTopic } from '../../../lib/storage';
+import { clearHeldFeedHeroLeads, useFeedHeroData } from './useFeedHeroData';
+
+const post = (id: string) => ({ ...basePost, id, title: id });
+
+const mockHero = (posts: ReturnType<typeof post>[]) =>
+  mockGraphQL({
+    request: {
+      query: FEED_HERO_QUERY,
+      variables: { loggedIn: false, supportedTypes: baseFeedSupportedTypes },
+    },
+    result: { data: { feedHero: { posts, highlights: [] } } },
+  });
+
+const cacheKey = generateStorageKey(StorageTopic.Post, 'feedHero', 'anonymous');
+
+const renderData = (client = new QueryClient()) =>
+  renderHook(() => useFeedHeroData(), {
+    wrapper: ({ children }: { children: ReactNode }): ReactElement => (
+      <TestBootProvider client={client}>{children}</TestBootProvider>
+    ),
+  });
+
+beforeEach(() => {
+  nock.cleanAll();
+  clearHeldFeedHeroLeads();
+});
+
+it('should start from the last payload and keep its lead for the session', async () => {
+  storageWrapper.setItem(
+    cacheKey,
+    JSON.stringify({
+      data: { feedHero: { posts: [post('cached')], highlights: [] } },
+      savedAt: 0,
+    }),
+  );
+  mockHero([post('fresh')]);
+
+  const { result } = renderData();
+
+  expect(result.current.leadPost?.id).toEqual('cached');
+  await waitFor(() => expect(result.current.posts[0]?.id).toEqual('fresh'));
+  expect(result.current.leadPost?.id).toEqual('cached');
+  // The next load starts from what this one fetched.
+  expect(JSON.parse(storageWrapper.getItem(cacheKey) ?? '{}')).toMatchObject({
+    data: { feedHero: { posts: [{ id: 'fresh' }] } },
+  });
+});
+
+it('should hold the first lead it fetched when nothing was cached', async () => {
+  mockHero([post('first')]);
+
+  const { result } = renderData();
+
+  await waitFor(() => expect(result.current.leadPost?.id).toEqual('first'));
+});
@@ -0,0 +1,120 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { QueryKey } from '@tanstack/react-query';
+import type { Post } from '../../../graphql/posts';
+import { gqlClient } from '../../../graphql/common';
+import type { FeedHeroData } from '../../../graphql/feed';
+import { FEED_HERO_QUERY, baseFeedSupportedTypes } from '../../../graphql/feed';
+import type { PostHighlight } from '../../../graphql/highlights';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';
+import { useCachedTokenRecovery } from '../../../hooks/useCachedTokenRecovery';
+import { storageWrapper } from '../../../lib/storageWrapper';
+import { generateStorageKey, StorageTopic } from '../../../lib/storage';
+
+const empty: never[] = [];
+
+type CachedFeedHero = { data: FeedHeroData; savedAt: number };
+
+const storageKey = (userId?: string): string =>
+  generateStorageKey(StorageTopic.Post, 'feedHero', userId ?? 'anonymous');
+
+const readCachedFeedHero = (userId?: string): CachedFeedHero | undefined => {
+  const raw = storageWrapper.getItem(storageKey(userId));
+  if (!raw) {
+    return undefined;
+  }
+  try {
+    const parsed = JSON.parse(raw) as CachedFeedHero;
+    return Array.isArray(parsed?.data?.feedHero?.posts) &&
+      typeof parsed.savedAt === 'number'
+      ? parsed
+      : undefined;
+  } catch (err) {
+    return undefined;
+  }
+};
+
+/**
+ * The lead post each reader saw first in this page session, by reader. The
+ * top story shows it and the feed keeps it out of its grid, so the two agree
+ * however often the hero query refreshes; a new lead waits for the next load.
+ */
+const heldLeads = new Map<string, Post>();
+
+/** A fresh session's leads, for tests that render several sessions. */
+export const clearHeldFeedHeroLeads = (): void => heldLeads.clear();
+
+/**
+ * The hero's one query, shared by the hero section and the top story and
+ * Happening Now widgets, so the rail fetches the headlines once however the
+ * reader arranged them. Vote and bookmark patch this key through
+ * `useFeedHeroPostActions`.
+ *
+ * It starts from the last payload this reader got, cached per reader, so the
+ * rail paints with its content on the first frame and revalidates in the
+ * background for the next load.
+ */
+export const useFeedHeroData = ({
+  enabled = true,
+}: { enabled?: boolean } = {}): {
+  queryKey: QueryKey;
+  posts: Post[];
+  highlights: PostHighlight[];
+  /** The lead post held for this session (the live copy when it has one). */
+  leadPost?: Post;
+  isPending: boolean;
+} => {
+  const { user, isTokenValid } = useAuthContext();
+  const queryKey = useMemo(
+    () => generateQueryKey(RequestKey.FeedHero, user),
+    [user],
+  );
+  const isEnabled = isTokenValid && enabled;
+  const cached = useMemo(() => readCachedFeedHero(user?.id), [user?.id]);
+
+  const { data, isPending, isFetchedAfterMount, dataUpdatedAt } = useQuery({
+    queryKey,
+    queryFn: () =>
+      gqlClient.request<FeedHeroData>(FEED_HERO_QUERY, {
+        loggedIn: !!user,
+        supportedTypes: baseFeedSupportedTypes,
+      }),
+    enabled: isEnabled,
+    // The same window `majorHeadlinesQueryOptions` gives the in-feed card, so
+    // the two surfaces the experiment compares are equally fresh.
+    staleTime: StaleTime.OneMinute,
+    // Older than the stale time, so the cached copy paints and is refetched.
+    initialData: cached?.data,
+    initialDataUpdatedAt: cached?.savedAt,
+  });
+  useCachedTokenRecovery({ queryKey, enabled: isEnabled });
+
+  // What the next load starts from.
+  useEffect(() => {
+    if (!isFetchedAfterMount || !data?.feedHero) {
+      return;
+    }
+    storageWrapper.setItem(
+      storageKey(user?.id),
+      JSON.stringify({ data, savedAt: dataUpdatedAt }),
+    );
+  }, [data, dataUpdatedAt, isFetchedAfterMount, user?.id]);
+
+  const posts = data?.feedHero?.posts ?? empty;
+  const readerKey = user?.id ?? 'anonymous';
+  if (!heldLeads.has(readerKey) && posts[0]) {
+    heldLeads.set(readerKey, posts[0]);
+  }
+  const held = heldLeads.get(readerKey);
+  // The held post by id, so votes and bookmarks on the live copy still show.
+  const leadPost = held && (posts.find(({ id }) => id === held.id) ?? held);
+
+  return {
+    queryKey,
+    posts,
+    highlights: data?.feedHero?.highlights ?? empty,
+    leadPost,
+    isPending,
+  };
+};