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

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

src/components/ResolvedAssetImage.tsx

@@ -1,6 +1,7 @@
 import React, { type ImgHTMLAttributes, useEffect, useState } from 'react';
 
 import { useResolvedAssetReadUrl } from '../hooks/useResolvedAssetReadUrl';
+import { RuntimeResourcePendingMarker } from './common/RuntimeResourcePendingMarker';
 
 type ResolvedAssetImageProps = Omit<
   ImgHTMLAttributes<HTMLImageElement>,
@@ -19,39 +20,50 @@ export function ResolvedAssetImage({
   onError,
   ...rest
 }: ResolvedAssetImageProps) {
-  const { resolvedUrl } = useResolvedAssetReadUrl(src, {
+  const { resolvedUrl, isResolving, shouldResolve } = useResolvedAssetReadUrl(src, {
     refreshKey,
   });
+  const normalizedSource = src?.trim() ?? '';
   const normalizedFallbackSrc = fallbackSrc?.trim() ?? '';
   const [useFallbackSrc, setUseFallbackSrc] = useState(false);
   const finalSrc =
     useFallbackSrc && normalizedFallbackSrc
       ? normalizedFallbackSrc
       : resolvedUrl || normalizedFallbackSrc;
+  const pendingMarker = (
+    <RuntimeResourcePendingMarker
+      source={normalizedSource}
+      kind="image"
+      isPending={shouldResolve && isResolving}
+    />
+  );
 
   useEffect(() => {
     setUseFallbackSrc(false);
   }, [normalizedFallbackSrc, resolvedUrl]);
 
   if (!finalSrc) {
-    return null;
+    return pendingMarker;
   }
 
   return (
-    <img
-      {...rest}
-      src={finalSrc}
-      alt={alt}
-      onError={(event) => {
-        if (
-          normalizedFallbackSrc &&
-          !useFallbackSrc &&
-          finalSrc !== normalizedFallbackSrc
-        ) {
-          setUseFallbackSrc(true);
-        }
-        onError?.(event);
-      }}
-    />
+    <>
+      {pendingMarker}
+      <img
+        {...rest}
+        src={finalSrc}
+        alt={alt}
+        onError={(event) => {
+          if (
+            normalizedFallbackSrc &&
+            !useFallbackSrc &&
+            finalSrc !== normalizedFallbackSrc
+          ) {
+            setUseFallbackSrc(true);
+          }
+          onError?.(event);
+        }}
+      />
+    </>
   );
 }