fix: 稳定推荐页运行态封面遮罩

2026-06-07 16:00:29 +08:00
parent c810e255a5
commit 8dca8a6443
6 changed files with 672 additions and 34 deletions
--- a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
@@ -41,6 +41,7 @@ import {
 const {
  mockQrCodeToDataUrl,
  mockRedirectToPaymentUrl,
+  mockRequestJson,
  mockBuildReferralCenter,
  mockBuildTaskCenter,
  mockClaimRpgProfileTaskReward,
@@ -128,6 +129,7 @@ const {
  return {
    mockQrCodeToDataUrl: qrCodeToDataUrl,
    mockRedirectToPaymentUrl: redirectToPaymentUrl,
+    mockRequestJson: vi.fn(),
    mockBuildReferralCenter: buildReferralCenter,
    mockBuildTaskCenter: buildTaskCenter,
    mockGetRpgProfileReferralInviteCenter: vi.fn(async () =>
@@ -349,6 +351,10 @@ const {
 }));

 vi.mock('../../services/apiClient', () => ({
+  BACKGROUND_AUTH_REQUEST_OPTIONS: {
+    authImpact: 'background',
+  },
+  requestJson: mockRequestJson,
  refreshStoredAccessToken: mockRefreshStoredAccessToken,
 }));

@@ -3906,6 +3912,234 @@ test('mobile recommend startup keeps cover visible without loading copy', () =>
  expect(screen.getAllByText('奇幻拼图').length).toBeGreaterThan(0);
 });

+test('mobile recommend preloads every fetched work cover', () => {
+  const preloadedSrcs: string[] = [];
+  mockRequestJson.mockResolvedValue({
+    read: {
+      objectKey: 'generated-recommend/current.png',
+      signedUrl: 'https://signed.example.com/current-cover.png',
+      expiresAt: '2099-01-01T00:10:00Z',
+    },
+  });
+  class MockPreloadImage {
+    decoding = 'auto';
+    onload: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+
+    set src(value: string) {
+      preloadedSrcs.push(value);
+    }
+  }
+  vi.stubGlobal('Image', MockPreloadImage);
+
+  const firstEntry = {
+    ...puzzlePublicEntry,
+    workId: 'puzzle-work-feed-1',
+    profileId: 'puzzle-profile-feed-1',
+    ownerUserId: 'user-feed-1',
+    publicWorkCode: 'PZ-FEED1',
+    worldName: '当前拼图',
+    coverImageSrc: '/generated-recommend/current.png',
+  } satisfies PlatformPublicGalleryCard;
+  const secondEntry = {
+    ...puzzlePublicEntry,
+    workId: 'puzzle-work-feed-2',
+    profileId: 'puzzle-profile-feed-2',
+    ownerUserId: 'user-feed-2',
+    publicWorkCode: 'PZ-FEED2',
+    worldName: '下一拼图',
+    coverImageSrc: 'next-cover.png',
+  } satisfies PlatformPublicGalleryCard;
+  const thirdEntry = {
+    ...puzzlePublicEntry,
+    workId: 'puzzle-work-feed-3',
+    profileId: 'puzzle-profile-feed-3',
+    ownerUserId: 'user-feed-3',
+    publicWorkCode: 'PZ-FEED3',
+    worldName: '上一拼图',
+    coverImageSrc: 'previous-cover.png',
+  } satisfies PlatformPublicGalleryCard;
+
+  renderLoggedOutHomeView(vi.fn(), {
+    latestEntries: [firstEntry, secondEntry, thirdEntry],
+    activeRecommendEntryKey: 'puzzle:user-feed-1:puzzle-profile-feed-1',
+  });
+
+  expect(preloadedSrcs).toEqual(
+    expect.arrayContaining([
+      'next-cover.png',
+      'previous-cover.png',
+      '/creation-type-references/puzzle.webp',
+    ]),
+  );
+  expect(preloadedSrcs).not.toContain('/generated-recommend/current.png');
+  return waitFor(() => {
+    expect(preloadedSrcs).toContain('https://signed.example.com/current-cover.png');
+  });
+});
+
+test('mobile recommend runtime cover keeps the labeled work card visual', () => {
+  const carouselEntry = buildCarouselPuzzleEntry(
+    'recommend-card-cover',
+    '轮播拼图',
+    'card-cover',
+  );
+
+  renderLoggedOutHomeView(vi.fn(), {
+    latestEntries: [carouselEntry],
+    activeRecommendEntryKey:
+      'puzzle:user-2:puzzle-profile-recommend-card-cover',
+    isStartingRecommendEntry: true,
+    recommendRuntimeContent: null,
+  });
+
+  const cover = document.querySelector('.platform-recommend-runtime-cover');
+  const coverImage = cover?.querySelector('img');
+
+  expect(coverImage?.getAttribute('src')).toBe('card-cover-1.png');
+  expect(coverImage?.getAttribute('src')).not.toBe('card-cover-fallback.png');
+  expect(cover?.querySelector('.platform-recommend-runtime-preview')).toBeTruthy();
+  expect(cover?.textContent).toContain('拼图');
+  expect(cover?.textContent).toContain('轮播拼图');
+});
+
+test('mobile recommend runtime cover does not swap to a late signed cover', async () => {
+  const preloadImages: Array<{
+    srcValue: string;
+    onload: (() => void) | null;
+  }> = [];
+  mockRequestJson.mockResolvedValue({
+    read: {
+      objectKey: 'generated-recommend/late-current.png',
+      signedUrl: 'https://signed.example.com/late-current-cover.png',
+      expiresAt: '2099-01-01T00:10:00Z',
+    },
+  });
+  class MockPreloadImage {
+    decoding = 'auto';
+    complete = false;
+    onload: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+    srcValue = '';
+
+    set src(value: string) {
+      this.srcValue = value;
+      preloadImages.push(this);
+    }
+  }
+  vi.stubGlobal('Image', MockPreloadImage);
+
+  const generatedCoverEntry = {
+    ...puzzlePublicEntry,
+    workId: 'puzzle-work-late-cover',
+    profileId: 'puzzle-profile-late-cover',
+    ownerUserId: 'user-late-cover',
+    publicWorkCode: 'PZ-LATE1',
+    worldName: '迟到封面拼图',
+    coverImageSrc: '/generated-recommend/late-current.png',
+  } satisfies PlatformPublicGalleryCard;
+
+  renderLoggedOutHomeView(vi.fn(), {
+    latestEntries: [generatedCoverEntry],
+    activeRecommendEntryKey: 'puzzle:user-late-cover:puzzle-profile-late-cover',
+    isStartingRecommendEntry: true,
+    recommendRuntimeContent: null,
+  });
+
+  const cover = document.querySelector('.platform-recommend-runtime-cover');
+  const coverImage = cover?.querySelector('img');
+  expect(coverImage?.getAttribute('src')).toBe(
+    '/creation-type-references/puzzle.webp',
+  );
+
+  await waitFor(() => {
+    expect(
+      preloadImages.some(
+        (image) =>
+          image.srcValue ===
+          'https://signed.example.com/late-current-cover.png',
+      ),
+    ).toBe(true);
+  });
+
+  act(() => {
+    preloadImages
+      .filter(
+        (image) =>
+          image.srcValue ===
+          'https://signed.example.com/late-current-cover.png',
+      )
+      .forEach((image) => image.onload?.());
+  });
+
+  await waitFor(() => expect(mockRequestJson).toHaveBeenCalled());
+  expect(
+    document
+      .querySelector('.platform-recommend-runtime-cover img')
+      ?.getAttribute('src'),
+  ).toBe('/creation-type-references/puzzle.webp');
+  expect(
+    Array.from(
+      document.querySelectorAll('.platform-recommend-runtime-cover img'),
+    ).some(
+      (image) =>
+        image.getAttribute('src') ===
+        'https://signed.example.com/late-current-cover.png',
+    ),
+  ).toBe(false);
+});
+
+test('mobile recommend cover waits until runtime images are ready', async () => {
+  vi.useFakeTimers();
+  const animationCallbacks: FrameRequestCallback[] = [];
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    writable: true,
+    value: vi.fn((callback: FrameRequestCallback) => {
+      animationCallbacks.push(callback);
+      return animationCallbacks.length;
+    }),
+  });
+  Object.defineProperty(window, 'cancelAnimationFrame', {
+    configurable: true,
+    writable: true,
+    value: vi.fn(),
+  });
+
+  renderLoggedOutHomeView(vi.fn(), {
+    latestEntries: [puzzlePublicEntry],
+    activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
+    isRecommendRuntimeReady: true,
+    recommendRuntimeContent: (
+      <img src="/runtime-sprite.png" alt="runtime sprite" />
+    ),
+  });
+
+  act(() => {
+    animationCallbacks.splice(0).forEach((callback) => callback(16));
+  });
+  expect(
+    document.querySelector('.platform-recommend-runtime-cover')?.className,
+  ).not.toContain('platform-recommend-runtime-cover--hidden');
+
+  fireEvent.load(screen.getByAltText('runtime sprite'));
+  act(() => {
+    animationCallbacks.splice(0).forEach((callback) => callback(32));
+  });
+
+  expect(
+    document.querySelector('.platform-recommend-runtime-cover')?.className,
+  ).not.toContain('platform-recommend-runtime-cover--hidden');
+
+  await act(async () => {
+    vi.advanceTimersByTime(520);
+  });
+
+  expect(
+    document.querySelector('.platform-recommend-runtime-cover')?.className,
+  ).toContain('platform-recommend-runtime-cover--hidden');
+});
+
 test('mobile recommend keeps runtime visual stable when active entry changes', async () => {
  const animationCallbacks: FrameRequestCallback[] = [];
  Object.defineProperty(window, 'requestAnimationFrame', {
@@ -4119,7 +4353,9 @@ test('logged in recommend runtime preloads adjacent work previews and drag switc

  expect(screen.getByTestId('recommend-runtime')).toBeTruthy();
  expect(
-    document.querySelectorAll('.platform-recommend-runtime-preview'),
+    document.querySelectorAll(
+      '.platform-recommend-runtime-preview:not(.platform-recommend-runtime-preview--cover)',
+    ),
  ).toHaveLength(2);
  expect(
    document.querySelectorAll('.platform-recommend-swipe-card'),
@@ -4170,6 +4406,10 @@ test('logged in recommend runtime preloads adjacent work previews and drag switc

  expect(onSelectNextRecommendEntry).toHaveBeenCalledTimes(1);
  expect(onSelectPreviousRecommendEntry).not.toHaveBeenCalled();
+  expect(rail?.style.transform).toBe('translate3d(0, 0px, 0)');
+  expect(rail?.className).toContain(
+    'platform-recommend-swipe-rail--resetting',
+  );
  vi.useRealTimers();
 });

--- a/src/components/rpg-entry/RpgEntryHomeView.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.tsx
@@ -37,6 +37,7 @@ import {
  type CSSProperties,
  type PointerEvent,
  type ReactNode,
+  type RefObject,
  Suspense,
  useCallback,
  useEffect,
@@ -79,6 +80,10 @@ import type {
 } from '../../../packages/shared/src/contracts/runtime';
 import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
 import { refreshStoredAccessToken } from '../../services/apiClient';
+import {
+  isGeneratedLegacyPath,
+  resolveAssetReadUrl,
+} from '../../services/assetReadUrlService';
 import type { AuthUser } from '../../services/authService';
 import {
  getPublicAuthUserByCode,
@@ -261,6 +266,260 @@ const PROFILE_INVITE_QUERY_KEYS = ['inviteCode', 'invite_code'] as const;
 const RECOMMEND_ENTRY_SWIPE_THRESHOLD_PX = 36;
 const RECOMMEND_ENTRY_COMMIT_ANIMATION_MS = 180;
 const RECOMMEND_ENTRY_DRAG_LIMIT_PX = 160;
+const RECOMMEND_RUNTIME_COVER_MIN_VISIBLE_MS = 520;
+
+type RecommendResolvedCoverUrlMap = ReadonlyMap<string, string>;
+
+function resolveRecommendDisplayCoverImage(
+  imageSrc: string,
+  fallbackSrc: string,
+  resolvedCoverUrls?: RecommendResolvedCoverUrlMap,
+) {
+  const normalizedImageSrc = imageSrc.trim();
+  const normalizedFallbackSrc = fallbackSrc.trim();
+
+  if (!normalizedImageSrc) {
+    return (
+      resolvedCoverUrls?.get(normalizedFallbackSrc) ?? normalizedFallbackSrc
+    );
+  }
+
+  const resolvedImageSrc = resolvedCoverUrls?.get(normalizedImageSrc);
+  if (resolvedImageSrc) {
+    return resolvedImageSrc;
+  }
+
+  if (isGeneratedLegacyPath(normalizedImageSrc)) {
+    return (
+      resolvedCoverUrls?.get(normalizedFallbackSrc) ?? normalizedFallbackSrc
+    );
+  }
+
+  return normalizedImageSrc;
+}
+
+function resolveRecommendCardCoverImage(entry: PlatformPublicGalleryCard) {
+  const cardCoverSlide = resolvePlatformWorldCoverSlides(entry)[0] ?? null;
+  return (
+    cardCoverSlide?.imageSrc.trim() || resolvePlatformWorldCoverImage(entry)
+  );
+}
+
+function collectRecommendCoverPreloadUrls(entries: PlatformPublicGalleryCard[]) {
+  const urls = new Set<string>();
+
+  entries.forEach((entry) => {
+    resolvePlatformWorldCoverSlides(entry).forEach((slide) => {
+      const slideImageSrc = slide.imageSrc.trim();
+      if (slideImageSrc) {
+        urls.add(slideImageSrc);
+      }
+    });
+    [
+      resolveRecommendCardCoverImage(entry),
+      resolvePlatformWorldCoverImage(entry),
+      resolvePlatformWorldFallbackCoverImage(entry),
+    ]
+      .map((url) => url.trim())
+      .filter(Boolean)
+      .forEach((url) => urls.add(url));
+  });
+
+  return [...urls];
+}
+
+function useResolvedRecommendCoverImages(
+  entries: PlatformPublicGalleryCard[],
+): RecommendResolvedCoverUrlMap {
+  const preloadUrls = useMemo(
+    () => collectRecommendCoverPreloadUrls(entries),
+    [entries],
+  );
+  const preloadKey = preloadUrls.join('\n');
+  const [resolvedCoverUrls, setResolvedCoverUrls] = useState<
+    Map<string, string>
+  >(() => new Map());
+
+  useEffect(() => {
+    let cancelled = false;
+    const cleanupCallbacks: Array<() => void> = [];
+    const preloadCoverImage = (
+      imageSrc: string,
+      onLoaded?: (loadedImageSrc: string) => void,
+    ) => {
+      if (!imageSrc || typeof Image === 'undefined') {
+        onLoaded?.(imageSrc);
+        return;
+      }
+
+      const image = new Image();
+      const cleanupImage = () => {
+        image.onload = null;
+        image.onerror = null;
+      };
+      const finishImageLoad = () => {
+        if (cancelled) {
+          return;
+        }
+        cleanupImage();
+        onLoaded?.(imageSrc);
+      };
+      const finishImageError = () => {
+        if (cancelled) {
+          return;
+        }
+        cleanupImage();
+      };
+
+      image.decoding = 'async';
+      image.onload = finishImageLoad;
+      image.onerror = finishImageError;
+      image.src = imageSrc;
+
+      if (image.complete) {
+        finishImageLoad();
+      }
+
+      cleanupCallbacks.push(cleanupImage);
+    };
+
+    setResolvedCoverUrls((currentUrls) => {
+      const nextUrls = new Map<string, string>();
+      preloadUrls.forEach((url) => {
+        const cachedUrl = currentUrls.get(url);
+        if (cachedUrl) {
+          nextUrls.set(url, cachedUrl);
+          return;
+        }
+        if (!isGeneratedLegacyPath(url)) {
+          nextUrls.set(url, url);
+        }
+      });
+      return nextUrls;
+    });
+
+    preloadUrls.forEach((url) => {
+      if (!isGeneratedLegacyPath(url)) {
+        preloadCoverImage(url);
+        return;
+      }
+
+      void resolveAssetReadUrl(url)
+        .then((resolvedUrl) => {
+          if (cancelled || !resolvedUrl) {
+            return;
+          }
+
+          preloadCoverImage(resolvedUrl, (loadedUrl) => {
+            if (cancelled) {
+              return;
+            }
+
+            setResolvedCoverUrls((currentUrls) => {
+              if (currentUrls.get(url) === loadedUrl) {
+                return currentUrls;
+              }
+
+              const nextUrls = new Map(currentUrls);
+              nextUrls.set(url, loadedUrl);
+              return nextUrls;
+            });
+          });
+        })
+        .catch(() => undefined);
+    });
+
+    return () => {
+      cancelled = true;
+      cleanupCallbacks.splice(0).forEach((cleanup) => cleanup());
+    };
+  }, [preloadKey, preloadUrls]);
+
+  return resolvedCoverUrls;
+}
+
+function scheduleRecommendRuntimeReady(
+  signal: AbortSignal,
+  onReady: (value: boolean) => void,
+) {
+  if (signal.aborted) {
+    return null;
+  }
+
+  return window.requestAnimationFrame(() => {
+    if (!signal.aborted) {
+      onReady(true);
+    }
+  });
+}
+
+function readyRecommendRuntime(
+  root: HTMLElement | null,
+  signal: AbortSignal,
+): Promise<boolean> {
+  if (!root || signal.aborted) {
+    return Promise.resolve(false);
+  }
+
+  const pendingImages = Array.from(root.querySelectorAll('img')).filter(
+    (image) => !image.complete,
+  );
+
+  return new Promise((resolve) => {
+    let animationFrameId: number | null = null;
+    let settled = false;
+    const cleanupCallbacks: Array<() => void> = [];
+    const finish = (value: boolean) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      cleanupCallbacks.splice(0).forEach((cleanup) => cleanup());
+      if (animationFrameId !== null) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+      resolve(value);
+    };
+    const abort = () => finish(false);
+    signal.addEventListener('abort', abort, { once: true });
+    cleanupCallbacks.push(() => signal.removeEventListener('abort', abort));
+
+    if (pendingImages.length === 0) {
+      animationFrameId = scheduleRecommendRuntimeReady(signal, finish);
+      if (animationFrameId === null) {
+        finish(false);
+      }
+      return;
+    }
+
+    let remaining = pendingImages.length;
+    const markImageReady = () => {
+      remaining -= 1;
+      if (remaining > 0) {
+        return;
+      }
+      animationFrameId = scheduleRecommendRuntimeReady(signal, finish);
+      if (animationFrameId === null) {
+        finish(false);
+      }
+    };
+
+    pendingImages.forEach((image) => {
+      const cleanupImageListeners = () => {
+        image.removeEventListener('load', markImageReady);
+        image.removeEventListener('error', markImageReady);
+      };
+      image.addEventListener('load', markImageReady, { once: true });
+      image.addEventListener('error', markImageReady, { once: true });
+      cleanupCallbacks.push(cleanupImageListeners);
+
+      if (image.complete) {
+        cleanupImageListeners();
+        markImageReady();
+      }
+    });
+  });
+}
 const WECHAT_JS_SDK_URL = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
 const WECHAT_PAY_CONFIRM_RETRY_DELAYS_MS = [800, 1600, 3000] as const;
 const WECHAT_NATIVE_PAY_QR_IMAGE_SIZE = 180;
@@ -928,17 +1187,62 @@ function CreationLibraryCard({
 function RecommendRuntimePreviewCard({
  entry,
  position,
+  resolvedCoverUrls,
 }: {
  entry: PlatformPublicGalleryCard;
-  position: 'previous' | 'next';
+  position?: 'previous' | 'next' | 'cover';
+  resolvedCoverUrls?: RecommendResolvedCoverUrlMap;
 }) {
-  const coverImage = resolvePlatformWorldCoverImage(entry);
+  const rawCoverImage = resolveRecommendCardCoverImage(entry);
+  const rawFallbackCoverImage = resolvePlatformWorldFallbackCoverImage(entry);
+  const resolvedCoverImage = resolveRecommendDisplayCoverImage(
+    rawCoverImage,
+    rawFallbackCoverImage,
+    resolvedCoverUrls,
+  );
+  const fallbackCoverImage =
+    resolvedCoverUrls?.get(rawFallbackCoverImage) ?? rawFallbackCoverImage;
+  const previewKey = `${buildPublicGalleryCardKey(entry)}:${position ?? 'preview'}`;
+  const shouldLockCoverImage = position === 'cover';
+  const [lockedCoverImage, setLockedCoverImage] = useState({
+    key: previewKey,
+    imageSrc: resolvedCoverImage,
+    fallbackSrc: fallbackCoverImage,
+  });
+
+  useEffect(() => {
+    setLockedCoverImage((currentValue) => {
+      if (shouldLockCoverImage) {
+        return currentValue;
+      }
+      return {
+        key: previewKey,
+        imageSrc: resolvedCoverImage,
+        fallbackSrc: fallbackCoverImage,
+      };
+    });
+  }, [
+    fallbackCoverImage,
+    previewKey,
+    resolvedCoverImage,
+    shouldLockCoverImage,
+  ]);
+
+  const coverImage = shouldLockCoverImage
+    ? lockedCoverImage.imageSrc
+    : resolvedCoverImage;
+  const displayFallbackCoverImage = shouldLockCoverImage
+    ? lockedCoverImage.imageSrc
+    : fallbackCoverImage;
  const displayName = formatPlatformWorkDisplayName(entry.worldName);
  const typeLabel = describePublicGalleryCardKind(entry);
+  const previewClassName = `platform-recommend-runtime-preview ${
+    position === 'cover' ? 'platform-recommend-runtime-preview--cover' : ''
+  }`;

  return (
    <div
-      className="platform-recommend-runtime-preview"
+      className={previewClassName}
      aria-hidden="true"
      data-preview-position={position}
    >
@@ -946,6 +1250,7 @@ function RecommendRuntimePreviewCard({
        <PlatformWorkCoverArtwork
          entry={entry}
          imageSrc={coverImage}
+          fallbackSrc={displayFallbackCoverImage}
          alt=""
          className="absolute inset-0 h-full w-full object-cover"
        />
@@ -966,43 +1271,48 @@ function RecommendRuntimePreviewCard({
 function RecommendRuntimeCover({
  entry,
  className = '',
+  resolvedCoverUrls,
 }: {
  entry: PlatformPublicGalleryCard;
  className?: string;
+  resolvedCoverUrls?: RecommendResolvedCoverUrlMap;
 }) {
-  const coverImage = resolvePlatformWorldCoverImage(entry);
-  const fallbackCoverImage = resolvePlatformWorldFallbackCoverImage(entry);
-
  return (
    <div
      className={`platform-recommend-runtime-cover ${className}`}
      aria-hidden="true"
    >
-      {coverImage || fallbackCoverImage ? (
-        <PlatformWorkCoverArtwork
-          entry={entry}
-          imageSrc={coverImage}
-          fallbackSrc={fallbackCoverImage}
-          alt=""
-          className="absolute inset-0 h-full w-full object-cover"
-        />
-      ) : (
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_22%_18%,rgba(255,255,255,0.28),transparent_30%),linear-gradient(135deg,rgba(255,118,117,0.42),rgba(89,164,255,0.34))]" />
-      )}
-      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.34))]" />
+      <RecommendRuntimePreviewCard
+        key={buildPublicGalleryCardKey(entry)}
+        entry={entry}
+        position="cover"
+        resolvedCoverUrls={resolvedCoverUrls}
+      />
    </div>
  );
 }

-function RecommendRuntimeMountedProbe({
-  onMounted,
+function RecommendRuntimeReadyProbe({
+  rootRef,
+  onReady,
 }: {
-  onMounted: () => void;
+  rootRef: RefObject<HTMLDivElement | null>;
+  onReady: () => void;
 }) {
  useEffect(() => {
-    const animationFrameId = window.requestAnimationFrame(onMounted);
-    return () => window.cancelAnimationFrame(animationFrameId);
-  }, [onMounted]);
+    const abortController = new AbortController();
+
+    void readyRecommendRuntime(
+      rootRef.current,
+      abortController.signal,
+    ).then((ready) => {
+      if (ready) {
+        onReady();
+      }
+    });
+
+    return () => abortController.abort();
+  }, [onReady, rootRef]);

  return null;
 }
@@ -1012,15 +1322,55 @@ function RecommendRuntimeVisual({
  runtimeContent,
  isStarting,
  isRuntimeReady,
+  resolvedCoverUrls,
 }: {
  entry: PlatformPublicGalleryCard;
  runtimeContent?: ReactNode;
  isStarting: boolean;
  isRuntimeReady: boolean;
+  resolvedCoverUrls?: RecommendResolvedCoverUrlMap;
 }) {
  const [isRuntimeMounted, setIsRuntimeMounted] = useState(false);
+  const [isCoverMinVisible, setIsCoverMinVisible] = useState(true);
  const activeEntryKey = buildPublicGalleryCardKey(entry);
  const previousEntryKeyRef = useRef(activeEntryKey);
+  const runtimeVisibilityRef = useRef({
+    hasRuntimeContent: Boolean(runtimeContent),
+    isRuntimeMounted: false,
+    isRuntimeReady,
+    isStarting,
+  });
+  const runtimeViewportRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    runtimeVisibilityRef.current = {
+      hasRuntimeContent: Boolean(runtimeContent),
+      isRuntimeMounted,
+      isRuntimeReady,
+      isStarting,
+    };
+  }, [isRuntimeMounted, isRuntimeReady, isStarting, runtimeContent]);
+
+  useEffect(() => {
+    const currentRuntimeVisibility = runtimeVisibilityRef.current;
+    if (
+      previousEntryKeyRef.current !== activeEntryKey &&
+      currentRuntimeVisibility.hasRuntimeContent &&
+      currentRuntimeVisibility.isRuntimeMounted &&
+      currentRuntimeVisibility.isRuntimeReady &&
+      !currentRuntimeVisibility.isStarting
+    ) {
+      setIsCoverMinVisible(false);
+      return undefined;
+    }
+
+    setIsCoverMinVisible(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsCoverMinVisible(false);
+    }, RECOMMEND_RUNTIME_COVER_MIN_VISIBLE_MS);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [activeEntryKey]);

  useEffect(() => {
    if (previousEntryKeyRef.current === activeEntryKey) {
@@ -1037,33 +1387,40 @@ function RecommendRuntimeVisual({
    });
  }, [activeEntryKey, isRuntimeReady, isStarting]);

-  const handleRuntimeMounted = useCallback(() => {
+  const handleRuntimeReady = useCallback(() => {
    if (!isStarting && isRuntimeReady) {
      setIsRuntimeMounted(true);
    }
  }, [isRuntimeReady, isStarting]);

  const shouldShowCover =
-    !runtimeContent || isStarting || !isRuntimeReady || !isRuntimeMounted;
+    isCoverMinVisible ||
+    !runtimeContent ||
+    isStarting ||
+    !isRuntimeReady ||
+    !isRuntimeMounted;

  return (
    <div className="platform-recommend-runtime-visual">
      {runtimeContent ? (
        <Suspense fallback={null}>
          <div
+            ref={runtimeViewportRef}
            className="platform-recommend-runtime-viewport"
            aria-hidden={shouldShowCover}
          >
            {runtimeContent}
+            <RecommendRuntimeReadyProbe
+              key={activeEntryKey}
+              rootRef={runtimeViewportRef}
+              onReady={handleRuntimeReady}
+            />
          </div>
-          <RecommendRuntimeMountedProbe
-            key={activeEntryKey}
-            onMounted={handleRuntimeMounted}
-          />
        </Suspense>
      ) : null}
      <RecommendRuntimeCover
        entry={entry}
+        resolvedCoverUrls={resolvedCoverUrls}
        className={
          shouldShowCover ? '' : 'platform-recommend-runtime-cover--hidden'
        }
@@ -5424,6 +5781,8 @@ export function RpgEntryHomeView({
  const desktopFeaturedGrid = desktopRecommendEntries.slice(0, 4);
  const desktopCategoryGrid = activeCategoryEntries.slice(0, 6);
  const desktopLibraryPreview = myEntries.slice(0, 2);
+  const resolvedRecommendCoverUrls =
+    useResolvedRecommendCoverImages(recommendedFeedEntries);
  const discoverFeedEntries = useMemo(() => {
    const entryMap = new Map<string, PlatformPublicGalleryCard>();
    const sourceEntries =
@@ -5571,6 +5930,8 @@ export function RpgEntryHomeView({
  const [recommendDragOffsetY, setRecommendDragOffsetY] = useState(0);
  const [recommendDragCommitDirection, setRecommendDragCommitDirection] =
    useState<1 | -1 | null>(null);
+  const [isRecommendDragResetting, setIsRecommendDragResetting] =
+    useState(false);
  const activeRecommendEntryKeyForSelection = activeRecommendEntry
    ? buildPublicGalleryCardKey(activeRecommendEntry)
    : null;
@@ -5587,6 +5948,7 @@ export function RpgEntryHomeView({
      }

      setRecommendDragCommitDirection(direction);
+      setIsRecommendDragResetting(false);
      const panelHeight =
        recommendCardStageRef.current?.getBoundingClientRect().height ?? 0;
      const commitDistance = panelHeight > 0 ? panelHeight : window.innerHeight;
@@ -5599,8 +5961,12 @@ export function RpgEntryHomeView({
        } else {
          onSelectPreviousRecommendEntry?.(activeRecommendEntryKeyForSelection);
        }
+        setIsRecommendDragResetting(true);
        setRecommendDragOffsetY(0);
        setRecommendDragCommitDirection(null);
+        window.requestAnimationFrame(() => {
+          setIsRecommendDragResetting(false);
+        });
      }, RECOMMEND_ENTRY_COMMIT_ANIMATION_MS);
    },
    [
@@ -5689,7 +6055,9 @@ export function RpgEntryHomeView({
  } satisfies CSSProperties;
  const recommendRailClassName = recommendDragCommitDirection
    ? 'platform-recommend-swipe-rail--committing'
-    : recommendDragOffsetY === 0
+    : isRecommendDragResetting
+      ? 'platform-recommend-swipe-rail--resetting'
+      : recommendDragOffsetY === 0
      ? 'platform-recommend-swipe-rail--settled'
      : 'platform-recommend-swipe-rail--dragging';
  const selectNextRecommendEntry = useCallback(() => {
@@ -5826,6 +6194,7 @@ export function RpgEntryHomeView({
                    <RecommendRuntimePreviewCard
                      entry={previousRecommendEntry}
                      position="previous"
+                      resolvedCoverUrls={resolvedRecommendCoverUrls}
                    />
                  }
                />
@@ -5848,6 +6217,7 @@ export function RpgEntryHomeView({
                    runtimeContent={recommendRuntimeContent}
                    isStarting={isStartingRecommendEntry}
                    isRuntimeReady={isRecommendRuntimeReady}
+                    resolvedCoverUrls={resolvedRecommendCoverUrls}
                  />
                }
                onDragPointerDown={beginRecommendDrag}
@@ -5875,6 +6245,7 @@ export function RpgEntryHomeView({
                    <RecommendRuntimePreviewCard
                      entry={nextRecommendEntry}
                      position="next"
+                      resolvedCoverUrls={resolvedRecommendCoverUrls}
                    />
                  }
                />