Unify media preview loading background

apps/web/src/pages/playground-media.tsx

@@ -521,6 +521,7 @@ function MediaTaskCard(props: {
   const references = mediaReferenceItems(props.run);
   const promptParts = promptDisplayParts(props.run.prompt, references);
   const taskMeta = mediaTaskMetaText(props.run);
+  const previewState = items.length > 0 ? 'filled' : isPending ? 'loading' : 'empty';
 
   return (
     <article className="mediaTaskItem" data-status={props.run.status}>
@@ -552,9 +553,9 @@ function MediaTaskCard(props: {
         </div>
       )}
 
-      <div className="mediaPreviewStage" data-count={expectedCount}>
+      <div className="mediaPreviewStage" data-count={expectedCount} data-preview-state={previewState}>
         {backdropItem && <img aria-hidden="true" className="mediaPreviewBackdrop" src={backdropItem.src} alt="" />}
-        <div className="mediaGrid" data-count={expectedCount} style={style}>
+        <div className="mediaGrid" data-count={expectedCount} data-preview-state={previewState} style={style}>
           {Array.from({ length: expectedCount }).map((_, index) => (
             <MediaTile
               expectedCount={expectedCount}
@@ -660,7 +661,7 @@ function MediaTile(props: {
   const isLoading = props.status === 'submitting' || props.status === 'queued' || props.status === 'running';
   const isFailed = props.status === 'failed' || props.status === 'cancelled';
   return (
-    <div className="mediaTile" data-count={props.expectedCount} data-empty={!props.item && !isLoading} data-kind={props.mode}>
+    <div className="mediaTile" data-count={props.expectedCount} data-empty={!props.item && !isLoading} data-kind={props.mode} data-placeholder={!props.item}>
       {props.item?.type === 'video' && (
         <video controls muted playsInline poster={props.item.poster}>
           <source src={props.item.src} />