Unify media preview loading background

apps/web/src/styles/playground.css

@@ -2115,6 +2115,15 @@
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
 }
 
+.mediaPreviewStage[data-count="1"][data-preview-state="loading"] {
+  background:
+    linear-gradient(110deg, rgba(237, 240, 242, 0.92) 0%, rgba(247, 248, 249, 0.94) 42%, rgba(230, 234, 238, 0.88) 78%),
+    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 28px),
+    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 28px);
+  background-size: 220% 100%, auto, auto;
+  animation: mediaLoadingShimmer 1.35s ease-in-out infinite;
+}
+
 .mediaPreviewStage[data-count="1"]::after {
   position: absolute;
   inset: 0;
@@ -2148,6 +2157,14 @@
   overflow: visible;
 }
 
+.mediaPreviewStage[data-count="1"][data-preview-state="loading"] .mediaGrid,
+.mediaPreviewStage[data-count="1"][data-preview-state="empty"] .mediaGrid {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  align-self: stretch;
+}
+
 .mediaTile {
   position: relative;
   display: grid;
@@ -2166,6 +2183,14 @@
   box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
 }
 
+.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] {
+  width: 100%;
+  min-height: min(62vh, 600px);
+  border-radius: inherit;
+  background: transparent;
+  box-shadow: none;
+}
+
 .mediaTile[data-count="2"] {
   min-height: min(48vh, 520px);
 }
@@ -2205,6 +2230,15 @@
   background: #eef0f2;
 }
 
+.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaLoading,
+.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaEmptyTile {
+  background: transparent;
+}
+
+.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaLoading {
+  animation: none;
+}
+
 .mediaTaskError {
   display: grid;
   gap: 4px;