等待推荐页运行态全部资源

推荐页 ready 持续观察运行态图片、背景、音视频和资源 pending 标记
资源换签与玩法图集解析中通过隐藏标记阻止遮罩提前消失
补齐拼图、跳一跳、抓大鹅和敲木鱼运行态资源等待接入
补充推荐页资源等待回归测试和团队文档

src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx

@@ -30,12 +30,13 @@ import {
   getJumpHopRunDurationMs,
   getJumpHopStatusLabel,
   getJumpHopTileTone,
-  selectJumpHopTileAsset,
   type JumpHopCharacterVisualPosition,
   type JumpHopVisiblePlatform,
   resolveJumpHopCharacterCanvasPosition,
+  selectJumpHopTileAsset,
 } from '../../services/jump-hop/jumpHopRuntimeModel';
 import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
+import { RuntimeResourcePendingMarker } from '../common/RuntimeResourcePendingMarker';
 
 type JumpHopRuntimeJumpPayload = {
   dragDistance: number;
@@ -218,9 +219,12 @@ function JumpHopTileImage({
   platform: JumpHopVisiblePlatform['platform'];
 }) {
   const assetRefreshKey = getJumpHopTileAssetRefreshKey(asset);
-  const { resolvedUrl } = useResolvedAssetReadUrl(asset?.imageSrc, {
-    refreshKey: assetRefreshKey,
-  });
+  const { resolvedUrl, isResolving } = useResolvedAssetReadUrl(
+    asset?.imageSrc,
+    {
+      refreshKey: assetRefreshKey,
+    },
+  );
   const [isLoaded, setIsLoaded] = useState(false);
   const [hasError, setHasError] = useState(false);
 
@@ -234,6 +238,11 @@ function JumpHopTileImage({
 
   return (
     <div className="jump-hop-runtime__tile-image-stack">
+      <RuntimeResourcePendingMarker
+        source={asset?.imageSrc}
+        kind="image"
+        isPending={isResolving}
+      />
       {shouldShowFallback ? <IsometricFallbackTile platform={platform} /> : null}
       {shouldShowImage ? (
         <img
@@ -258,23 +267,36 @@ function JumpHopTileImage({
 
 function JumpHopTilePreloadImage({ asset }: { asset: JumpHopTileAsset }) {
   const assetRefreshKey = getJumpHopTileAssetRefreshKey(asset);
-  const { resolvedUrl } = useResolvedAssetReadUrl(asset.imageSrc, {
+  const { resolvedUrl, isResolving } = useResolvedAssetReadUrl(asset.imageSrc, {
     refreshKey: assetRefreshKey,
   });
 
   if (!resolvedUrl) {
-    return null;
+    return (
+      <RuntimeResourcePendingMarker
+        source={asset.imageSrc}
+        kind="image"
+        isPending={isResolving}
+      />
+    );
   }
 
   return (
-    <img
-      src={resolvedUrl}
-      alt=""
-      aria-hidden="true"
-      draggable={false}
-      data-testid="jump-hop-tile-preload-image"
-      className="jump-hop-runtime__tile-preload-image"
-    />
+    <>
+      <RuntimeResourcePendingMarker
+        source={asset.imageSrc}
+        kind="image"
+        isPending={isResolving}
+      />
+      <img
+        src={resolvedUrl}
+        alt=""
+        aria-hidden="true"
+        draggable={false}
+        data-testid="jump-hop-tile-preload-image"
+        className="jump-hop-runtime__tile-preload-image"
+      />
+    </>
   );
 }
 
@@ -619,26 +641,26 @@ export function JumpHopRuntimeShell({
     profile?.draft.coverComposite,
     profile?.summary.coverImageSrc,
   ].find(isJumpHopGeneratedBackgroundSource);
-  const { resolvedUrl: stageBackgroundUrl } = useResolvedAssetReadUrl(
-    stageBackgroundSource,
-    {
-      refreshKey: stageBackgroundSource,
-    },
-  );
+  const {
+    resolvedUrl: stageBackgroundUrl,
+    isResolving: isStageBackgroundResolving,
+  } = useResolvedAssetReadUrl(stageBackgroundSource, {
+    refreshKey: stageBackgroundSource,
+  });
   const backButtonAssetSource =
     profile?.backButtonAsset?.imageSrc?.trim() ||
     profile?.draft.backButtonAsset?.imageSrc?.trim() ||
     null;
-  const { resolvedUrl: backButtonAssetUrl } = useResolvedAssetReadUrl(
-    backButtonAssetSource,
-    {
-      refreshKey:
-        profile?.backButtonAsset?.assetObjectId ||
-        profile?.draft.backButtonAsset?.assetObjectId ||
-        backButtonAssetSource ||
-        undefined,
-    },
-  );
+  const {
+    resolvedUrl: backButtonAssetUrl,
+    isResolving: isBackButtonAssetResolving,
+  } = useResolvedAssetReadUrl(backButtonAssetSource, {
+    refreshKey:
+      profile?.backButtonAsset?.assetObjectId ||
+      profile?.draft.backButtonAsset?.assetObjectId ||
+      backButtonAssetSource ||
+      undefined,
+  });
 
   useEffect(() => {
     activeRunRef.current = activeRun;
@@ -1313,6 +1335,16 @@ export function JumpHopRuntimeShell({
 
   return (
     <div className="platform-remap-surface jump-hop-runtime relative h-full min-h-dvh w-full overflow-hidden bg-[#fffdf9] text-slate-950">
+      <RuntimeResourcePendingMarker
+        source={stageBackgroundSource}
+        kind="image"
+        isPending={isStageBackgroundResolving}
+      />
+      <RuntimeResourcePendingMarker
+        source={backButtonAssetSource}
+        kind="image"
+        isPending={isBackButtonAssetResolving}
+      />
       <section
         ref={stageRef}
         data-testid="jump-hop-stage"