@atlaskit/editor-plugin-media 20.0.4 → 20.1.0

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -13,8 +13,11 @@ import { Card, CardLoading } from '@atlaskit/media-card';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
+import { GeneratedMediaReveal } from '../../ui/GeneratedMediaReveal';
+import { createMediaNodeUpdater } from '../mediaNodeUpdater';
 import { MediaCardWrapper } from '../styles';
 
 // This is being used by DropPlaceholder now
@@ -103,11 +106,59 @@ export class MediaNode extends Component {
         canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig && !isViewOnly : false
       };
     }));
+    /**
+     * Media written straight into the document arrives without intrinsic dimensions, and the
+     * fetch that would supply them resolves `false` while the file is still processing. Only
+     * editor-driven uploads get a second attempt, from the plugin's media-state listener, so
+     * otherwise the card would keep its placeholder ratio forever. The preview rendering is the
+     * one moment the file is guaranteed ready, so the fetch is retried there.
+     */
+    _defineProperty(this, "fetchMissingDimensions", async () => {
+      var _pluginInjectionApi$w, _pluginInjectionApi$w2;
+      const {
+        node,
+        view,
+        mediaProvider,
+        contextIdentifierProvider,
+        mediaOptions,
+        pluginInjectionApi
+      } = this.props;
+      if (node.attrs.type === 'external' || !node.attrs.id || node.attrs.width && node.attrs.height) {
+        return;
+      }
+      const updater = createMediaNodeUpdater({
+        view,
+        mediaProvider,
+        contextIdentifierProvider,
+        node,
+        // Carries `allowRemoteDimensionsFetch`, so surfaces that cannot reach the media
+        // APIs get the default dimensions back instead of a request.
+        mediaOptions,
+        isMediaSingle: true,
+        lineLength: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : (_pluginInjectionApi$w2 = _pluginInjectionApi$w.sharedState.currentState()) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.lineLength
+      });
+      try {
+        const dimensions = await updater.getRemoteDimensions();
+        if (dimensions) {
+          updater.updateDimensions(dimensions);
+        }
+      } catch {
+        // Leaves the card at its placeholder ratio, which the reveal's own timeout covers.
+      }
+    });
     _defineProperty(this, "onPreviewRender", fileId => {
       this.emitMediaRenderEvent({
         renderedMediaId: fileId,
         type: 'preview-rendered'
       });
+      // Only tracked where the reveal uses it. Every media card in every editor calls this,
+      // and the extra render it would otherwise trigger is not free.
+      if (this.hasGeneratedMediaMotion && this.state.previewRenderedFileId !== fileId) {
+        this.setState({
+          previewRenderedFileId: fileId
+        });
+        this.fetchMissingDimensions();
+      }
       if (isExperimentEnabled('aifc_page_create_with_rovo_include_infographics')) {
         var _this$props$pluginInj2, _this$props$pluginInj3;
         (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.core) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.actions.execute(({
@@ -120,10 +171,22 @@ export class MediaNode extends Component {
     });
     _defineProperty(this, "onError", reason => {
       var _this$props$api;
+      // The card is already showing its error treatment, so let the reveal open onto
+      // that instead of waiting out its timeout.
+      this.setState({
+        failedFileId: this.props.node.attrs.id
+      });
       this.emitMediaRenderEvent({
         reason,
         type: 'error'
       });
+
+      // `getMediaRenderErrorHandler` also wires this for surfaces the analytics
+      // experiment does not cover, so re-read without exposure — the render-time read
+      // owns that — to keep the dispatch inside the experiment's own cohort.
+      if (!expValEqualsNoExposure('platform_editor_media_error_analytics', 'isEnabled', true)) {
+        return;
+      }
       const nestedUnder = this.getNestedUnder();
       (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.media.actions.handleMediaNodeRenderError(this.props.node, reason, nestedUnder);
     });
@@ -138,6 +201,12 @@ export class MediaNode extends Component {
       if (expValEquals('platform_editor_media_error_analytics', 'isEnabled', true)) {
         return this.onError;
       }
+      // The reveal needs terminal errors too, so it can open onto the card's error treatment
+      // rather than waiting out its timeout. `onError` keeps the analytics dispatch itself
+      // inside the experiment's cohort.
+      if (this.hasGeneratedMediaMotion) {
+        return this.onError;
+      }
       return (_this$props$mediaOpti = this.props.mediaOptions) !== null && _this$props$mediaOpti !== void 0 && _this$props$mediaOpti.onMediaRenderEvent ? this.onRemixRenderError : undefined;
     });
     /**
@@ -178,10 +247,10 @@ export class MediaNode extends Component {
       (_this$mediaPluginStat2 = this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 ? void 0 : _this$mediaPluginStat2.handleMediaNodeMount(node, () => this.props.getPos());
     });
     const {
-      view,
+      view: _view,
       syncProvider
     } = this.props;
-    this.mediaPluginState = mediaStateKey.getState(view.state);
+    this.mediaPluginState = mediaStateKey.getState(_view.state);
 
     // Initialize state from syncProvider (available on both server and client for SSR)
     if (syncProvider) {
@@ -195,7 +264,9 @@ export class MediaNode extends Component {
     var _this$props$mediaOpti2, _nextProps$mediaOptio;
     const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
     const hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
-    if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || this.getDataConsumerSource() !== this.getDataConsumerSource(nextProps) || ((_this$props$mediaOpti2 = this.props.mediaOptions) === null || _this$props$mediaOpti2 === void 0 ? void 0 : _this$props$mediaOpti2.onMediaRenderEvent) !== ((_nextProps$mediaOptio = nextProps.mediaOptions) === null || _nextProps$mediaOptio === void 0 ? void 0 : _nextProps$mediaOptio.onMediaRenderEvent) || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
+    if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection ||
+    // Patched in asynchronously once media services report the real size.
+    this.props.node.attrs.width !== nextProps.node.attrs.width || this.props.node.attrs.height !== nextProps.node.attrs.height || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || this.getDataConsumerSource() !== this.getDataConsumerSource(nextProps) || ((_this$props$mediaOpti2 = this.props.mediaOptions) === null || _this$props$mediaOpti2 === void 0 ? void 0 : _this$props$mediaOpti2.onMediaRenderEvent) !== ((_nextProps$mediaOptio = nextProps.mediaOptions) === null || _nextProps$mediaOptio === void 0 ? void 0 : _nextProps$mediaOptio.onMediaRenderEvent) || this.state.previewRenderedFileId !== nextState.previewRenderedFileId || this.state.failedFileId !== nextState.failedFileId || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
       return true;
     }
     return false;
@@ -314,6 +385,18 @@ export class MediaNode extends Component {
       });
     }
   }
+  /**
+   * Surface opt-in first, so surfaces that never ask for the motion are not exposed to the
+   * gate. The node type is checked after it, so every node on an opted-in surface counts
+   * towards the same exposure population.
+   */
+  get hasGeneratedMediaMotion() {
+    var _this$props$mediaOpti4;
+    return !!((_this$props$mediaOpti4 = this.props.mediaOptions) !== null && _this$props$mediaOpti4 !== void 0 && _this$props$mediaOpti4.allowAIGeneratedMediaMotion) && fg('aifc_page_create_defer_generated_visuals') &&
+    // File-backed only: `ExternalImageCard` reports neither its rendered preview nor its
+    // dimensions, so an external node could only ever open on the reveal's timeout.
+    this.props.node.attrs.type !== 'external';
+  }
   render() {
     var _dataConsumerMark$att2;
     const {
@@ -341,14 +424,26 @@ export class MediaNode extends Component {
 
     // Check if we have any media client config available (syncProvider, state, or upload config)
     const hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
+    const hasGeneratedMediaMotion = this.hasGeneratedMediaMotion;
+
+    // Opening before the real dimensions land would animate to the wrong height and snap
+    // when they correct. Nodes that never get them fall through to the reveal's timeout.
+    //
+    // A terminal error is readiness too: the card is already showing its error treatment,
+    // so the space opens onto that rather than hiding it until the timeout.
+    const isRevealReady = this.state.failedFileId === id || this.state.previewRenderedFileId === id && !!node.attrs.width && !!node.attrs.height;
     if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
-      return /*#__PURE__*/React.createElement(MediaCardWrapper, {
+      return /*#__PURE__*/React.createElement(GeneratedMediaReveal, {
+        isEnabled: hasGeneratedMediaMotion,
+        isReady: isRevealReady,
+        mediaKey: id
+      }, /*#__PURE__*/React.createElement(MediaCardWrapper, {
         dimensions: originalDimensions,
         borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         selected: selected
       }, /*#__PURE__*/React.createElement(CardLoading, {
         interactionName: "editor-media-card-loading"
-      }));
+      })));
     }
     const contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
     const identifier = type === 'external' ? {
@@ -379,7 +474,11 @@ export class MediaNode extends Component {
     // generic media type icon isn't shown while the image streams in. Gated on the
     // existing infographics experiment.
     const isCWR = !!this.props.isCwrAIGenerating && isExperimentEnabled('aifc_page_create_with_rovo_include_infographics');
-    return /*#__PURE__*/React.createElement(MediaCardWrapper, {
+    return /*#__PURE__*/React.createElement(GeneratedMediaReveal, {
+      isEnabled: hasGeneratedMediaMotion,
+      isReady: isRevealReady,
+      mediaKey: id
+    }, /*#__PURE__*/React.createElement(MediaCardWrapper, {
       dimensions: originalDimensions,
       onContextMenu: this.selectMediaSingle,
       borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
@@ -416,10 +515,11 @@ export class MediaNode extends Component {
       mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
       isAIGenerating: !!this.props.isAIGenerating,
       isCWR: isCWR,
+      hasLoadingMotion: hasGeneratedMediaMotion,
       onPreviewRender: this.onPreviewRender,
       fallbackMediaNameFetcher: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.fallbackMediaNameFetcher,
       onError: this.getMediaRenderErrorHandler()
-    })));
+    }))));
   }
 }
 const _default_1 = withImageLoader(MediaNode);

package/dist/es2019/ui/GeneratedMediaReveal.compiled.css

@@ -0,0 +1,12 @@
+._18m915vq{overflow-y:hidden}
+._1e0c11p5{display:grid}
+._1o51eoah{animation-fill-mode:backwards}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._1reo15vq{overflow-x:hidden}
+._1tkeidpf{min-height:0}
+._2z0563bf{grid-template-rows:0fr}
+._2z05hkll{grid-template-rows:1fr}
+._5sag15uc{animation-duration:var(--ds-duration-xlong,.4s)}
+._j7hq8gkt{animation-name:kaq7wke}
+@keyframes kaq7wke{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}}

package/dist/es2019/ui/GeneratedMediaReveal.js

@@ -0,0 +1,101 @@
+/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./GeneratedMediaReveal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useState } from 'react';
+
+/**
+ * Only `collapsed` and `revealing` size and clip the content. `open` drops back to plain
+ * block layout, so the reveal leaves nothing behind for selection outlines, resize handles
+ * or badges to collide with.
+ */
+
+/** Which path opened the node. Surfaced as a data attribute for debugging. */
+
+// A `0fr -> 1fr` grid row opens out to the content's natural height without anyone having to
+// measure it, which matters because the card's height comes from an aspect-ratio padding
+// further down the tree.
+const openRow = null;
+const collapsedStyles = null;
+const revealStyles = null;
+const clippedStyles = null;
+
+/**
+ * Fail-safe, not a normal path: opens the node even if the preview never reports itself
+ * rendered, so a failed or hanging image still ends up visible rather than staying collapsed.
+ * Also covers lazy loading, where a card collapsed to zero height may never satisfy the
+ * IntersectionObserver that triggers its fetch.
+ *
+ * Deliberately generous, because opening early is worse than opening late — the space then
+ * reveals the card's own loading treatment instead of the image, and an AI-generated image has
+ * to be generated, uploaded, processed and fetched first. `data-media-reveal-trigger` shows
+ * which path fired; `timeout` in normal use means the readiness signal is broken.
+ */
+const READY_TIMEOUT_MS = 30_000;
+
+// Backstop for reduced motion and browsers that don't interpolate grid-template-rows, where no
+// animationend fires. Must stay comfortably longer than the reveal, or it cuts it off part way.
+const REVEAL_TIMEOUT_MS = 1000;
+/**
+ * Opens the document out to make room for a media node once its preview is ready, rather than
+ * having the node snap into place at full height. For AI-generated media in the Create with
+ * Rovo preview, where images are inserted after the surrounding content has streamed in:
+ * holding the node closed until the preview has rendered means the space opens exactly once,
+ * with the image already fading in, so there is no placeholder to look at in between.
+ */
+export const GeneratedMediaReveal = ({
+  children,
+  isEnabled,
+  isReady,
+  mediaKey
+}) => {
+  const [state, setState] = useState('collapsed');
+  const [trigger, setTrigger] = useState();
+
+  // Reset during render rather than remounting on a `key`, which would also remount the card
+  // below and restart its fetch. The reveal's effect only runs while `collapsed`, so without
+  // this a replacement would appear at once, having inherited the previous file's `open`.
+  const [renderedMediaKey, setRenderedMediaKey] = useState(mediaKey);
+  if (mediaKey !== renderedMediaKey) {
+    setRenderedMediaKey(mediaKey);
+    setState('collapsed');
+    setTrigger(undefined);
+  }
+  useEffect(() => {
+    if (!isEnabled || state !== 'collapsed') {
+      return;
+    }
+    if (isReady) {
+      setTrigger('ready');
+      setState('revealing');
+      return;
+    }
+    const timer = setTimeout(() => {
+      setTrigger('timeout');
+      setState('revealing');
+    }, READY_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [isEnabled, isReady, state]);
+  useEffect(() => {
+    if (state !== 'revealing') {
+      return;
+    }
+    const timer = setTimeout(() => setState('open'), REVEAL_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [state]);
+  if (!isEnabled) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-media-reveal": state,
+    "data-media-reveal-trigger": trigger,
+    onAnimationEnd: event => {
+      // The media card runs animations of its own, which bubble through here.
+      if (event.target === event.currentTarget) {
+        setState('open');
+      }
+    },
+    className: ax([state === 'collapsed' && "_1e0c11p5 _2z0563bf", state === 'revealing' && "", state === 'revealing' && "_1e0c11p5 _2z05hkll _j7hq8gkt _5sag15uc _1pglindk _1o51eoah _1bumglyw"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([state !== 'open' && "_1reo15vq _18m915vq _1tkeidpf"])
+  }, children));
+};

package/dist/esm/nodeviews/mediaNodeView/media.js

@@ -24,8 +24,11 @@ import { Card, CardLoading } from '@atlaskit/media-card';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
+import { GeneratedMediaReveal } from '../../ui/GeneratedMediaReveal';
+import { createMediaNodeUpdater } from '../mediaNodeUpdater';
 import { MediaCardWrapper } from '../styles';
 
 // This is being used by DropPlaceholder now
@@ -130,15 +133,73 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig && !isViewOnly : false
       };
     }));
+    /**
+     * Media written straight into the document arrives without intrinsic dimensions, and the
+     * fetch that would supply them resolves `false` while the file is still processing. Only
+     * editor-driven uploads get a second attempt, from the plugin's media-state listener, so
+     * otherwise the card would keep its placeholder ratio forever. The preview rendering is the
+     * one moment the file is guaranteed ready, so the fetch is retried there.
+     */
+    _defineProperty(_this, "fetchMissingDimensions", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _pluginInjectionApi$w;
+      var _this$props, node, view, mediaProvider, contextIdentifierProvider, mediaOptions, pluginInjectionApi, updater, dimensions, _t;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _this$props = _this.props, node = _this$props.node, view = _this$props.view, mediaProvider = _this$props.mediaProvider, contextIdentifierProvider = _this$props.contextIdentifierProvider, mediaOptions = _this$props.mediaOptions, pluginInjectionApi = _this$props.pluginInjectionApi;
+            if (!(node.attrs.type === 'external' || !node.attrs.id || node.attrs.width && node.attrs.height)) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 1:
+            updater = createMediaNodeUpdater({
+              view: view,
+              mediaProvider: mediaProvider,
+              contextIdentifierProvider: contextIdentifierProvider,
+              node: node,
+              // Carries `allowRemoteDimensionsFetch`, so surfaces that cannot reach the media
+              // APIs get the default dimensions back instead of a request.
+              mediaOptions: mediaOptions,
+              isMediaSingle: true,
+              lineLength: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 || (_pluginInjectionApi$w = _pluginInjectionApi$w.sharedState.currentState()) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.lineLength
+            });
+            _context2.prev = 2;
+            _context2.next = 3;
+            return updater.getRemoteDimensions();
+          case 3:
+            dimensions = _context2.sent;
+            if (dimensions) {
+              updater.updateDimensions(dimensions);
+            }
+            _context2.next = 5;
+            break;
+          case 4:
+            _context2.prev = 4;
+            _t = _context2["catch"](2);
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 4]]);
+    })));
     _defineProperty(_this, "onPreviewRender", function (fileId) {
       _this.emitMediaRenderEvent({
         renderedMediaId: fileId,
         type: 'preview-rendered'
       });
+      // Only tracked where the reveal uses it. Every media card in every editor calls this,
+      // and the extra render it would otherwise trigger is not free.
+      if (_this.hasGeneratedMediaMotion && _this.state.previewRenderedFileId !== fileId) {
+        _this.setState({
+          previewRenderedFileId: fileId
+        });
+        _this.fetchMissingDimensions();
+      }
       if (isExperimentEnabled('aifc_page_create_with_rovo_include_infographics')) {
         var _this$props$pluginInj2;
-        (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.core) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.execute(function (_ref3) {
-          var tr = _ref3.tr;
+        (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.core) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           return tr.setMeta(mediaStateKey, {
             type: 'PREVIEW_RENDERED',
             fileId: fileId
@@ -148,10 +209,22 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "onError", function (reason) {
       var _this$props$api;
+      // The card is already showing its error treatment, so let the reveal open onto
+      // that instead of waiting out its timeout.
+      _this.setState({
+        failedFileId: _this.props.node.attrs.id
+      });
       _this.emitMediaRenderEvent({
         reason: reason,
         type: 'error'
       });
+
+      // `getMediaRenderErrorHandler` also wires this for surfaces the analytics
+      // experiment does not cover, so re-read without exposure — the render-time read
+      // owns that — to keep the dispatch inside the experiment's own cohort.
+      if (!expValEqualsNoExposure('platform_editor_media_error_analytics', 'isEnabled', true)) {
+        return;
+      }
       var nestedUnder = _this.getNestedUnder();
       (_this$props$api = _this.props.api) === null || _this$props$api === void 0 || _this$props$api.media.actions.handleMediaNodeRenderError(_this.props.node, reason, nestedUnder);
     });
@@ -166,6 +239,12 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       if (expValEquals('platform_editor_media_error_analytics', 'isEnabled', true)) {
         return _this.onError;
       }
+      // The reveal needs terminal errors too, so it can open onto the card's error treatment
+      // rather than waiting out its timeout. `onError` keeps the analytics dispatch itself
+      // inside the experiment's cohort.
+      if (_this.hasGeneratedMediaMotion) {
+        return _this.onError;
+      }
       return (_this$props$mediaOpti = _this.props.mediaOptions) !== null && _this$props$mediaOpti !== void 0 && _this$props$mediaOpti.onMediaRenderEvent ? _this.onRemixRenderError : undefined;
     });
     /**
@@ -204,10 +283,10 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         return _this.props.getPos();
       });
     });
-    var _this$props = _this.props,
-      view = _this$props.view,
-      syncProvider = _this$props.syncProvider;
-    _this.mediaPluginState = mediaStateKey.getState(view.state);
+    var _this$props2 = _this.props,
+      _view = _this$props2.view,
+      syncProvider = _this$props2.syncProvider;
+    _this.mediaPluginState = mediaStateKey.getState(_view.state);
 
     // Initialize state from syncProvider (available on both server and client for SSR)
     if (syncProvider) {
@@ -225,7 +304,9 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       var _this$props$mediaOpti2, _nextProps$mediaOptio;
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
       var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
-      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || this.getDataConsumerSource() !== this.getDataConsumerSource(nextProps) || ((_this$props$mediaOpti2 = this.props.mediaOptions) === null || _this$props$mediaOpti2 === void 0 ? void 0 : _this$props$mediaOpti2.onMediaRenderEvent) !== ((_nextProps$mediaOptio = nextProps.mediaOptions) === null || _nextProps$mediaOptio === void 0 ? void 0 : _nextProps$mediaOptio.onMediaRenderEvent) || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
+      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection ||
+      // Patched in asynchronously once media services report the real size.
+      this.props.node.attrs.width !== nextProps.node.attrs.width || this.props.node.attrs.height !== nextProps.node.attrs.height || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || this.getDataConsumerSource() !== this.getDataConsumerSource(nextProps) || ((_this$props$mediaOpti2 = this.props.mediaOptions) === null || _this$props$mediaOpti2 === void 0 ? void 0 : _this$props$mediaOpti2.onMediaRenderEvent) !== ((_nextProps$mediaOptio = nextProps.mediaOptions) === null || _nextProps$mediaOptio === void 0 ? void 0 : _nextProps$mediaOptio.onMediaRenderEvent) || this.state.previewRenderedFileId !== nextState.previewRenderedFileId || this.state.failedFileId !== nextState.failedFileId || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -233,17 +314,17 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var _dataConsumerMark$att;
-        var _this$props2, node, pluginInjectionApi, dataConsumerMark, infographicType, _pluginInjectionApi$a, contextIdentifierProvider, _t, _t2;
-        return _regeneratorRuntime.wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        var _this$props3, node, pluginInjectionApi, dataConsumerMark, infographicType, _pluginInjectionApi$a, contextIdentifierProvider, _t2, _t3;
+        return _regeneratorRuntime.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               this.handleNewNode(this.props);
               this.emitMediaRenderEvent({
                 type: 'mounted'
               });
-              _this$props2 = this.props, node = _this$props2.node, pluginInjectionApi = _this$props2.pluginInjectionApi;
+              _this$props3 = this.props, node = _this$props3.node, pluginInjectionApi = _this$props3.pluginInjectionApi;
               dataConsumerMark = this.getDataConsumerMark();
               infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0];
               if (infographicType) {
@@ -260,21 +341,21 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
                 });
               }
               contextIdentifierProvider = this.props.contextIdentifierProvider;
-              _t = this;
-              _context2.next = 1;
+              _t2 = this;
+              _context3.next = 1;
               return contextIdentifierProvider;
             case 1:
-              _t2 = _context2.sent;
-              _t.setState.call(_t, {
-                contextIdentifierProvider: _t2
+              _t3 = _context3.sent;
+              _t2.setState.call(_t2, {
+                contextIdentifierProvider: _t3
               });
-              _context2.next = 2;
+              _context3.next = 2;
               return this.setViewMediaClientConfig();
             case 2:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
       function componentDidMount() {
         return _componentDidMount.apply(this, arguments);
@@ -366,17 +447,32 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "hasGeneratedMediaMotion",
+    get:
+    /**
+     * Surface opt-in first, so surfaces that never ask for the motion are not exposed to the
+     * gate. The node type is checked after it, so every node on an opted-in surface counts
+     * towards the same exposure population.
+     */
+    function get() {
+      var _this$props$mediaOpti4;
+      return !!((_this$props$mediaOpti4 = this.props.mediaOptions) !== null && _this$props$mediaOpti4 !== void 0 && _this$props$mediaOpti4.allowAIGeneratedMediaMotion) && fg('aifc_page_create_defer_generated_visuals') &&
+      // File-backed only: `ExternalImageCard` reports neither its rendered preview nor its
+      // dimensions, so an external node could only ever open on the reveal's timeout.
+      this.props.node.attrs.type !== 'external';
+    }
   }, {
     key: "render",
     value: function render() {
       var _dataConsumerMark$att2;
-      var _this$props3 = this.props,
-        node = _this$props3.node,
-        selected = _this$props3.selected,
-        originalDimensions = _this$props3.originalDimensions,
-        isLoading = _this$props3.isLoading,
-        maxDimensions = _this$props3.maxDimensions,
-        mediaOptions = _this$props3.mediaOptions;
+      var _this$props4 = this.props,
+        node = _this$props4.node,
+        selected = _this$props4.selected,
+        originalDimensions = _this$props4.originalDimensions,
+        isLoading = _this$props4.isLoading,
+        maxDimensions = _this$props4.maxDimensions,
+        mediaOptions = _this$props4.mediaOptions;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
@@ -394,14 +490,26 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
 
       // Check if we have any media client config available (syncProvider, state, or upload config)
       var hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
+      var hasGeneratedMediaMotion = this.hasGeneratedMediaMotion;
+
+      // Opening before the real dimensions land would animate to the wrong height and snap
+      // when they correct. Nodes that never get them fall through to the reveal's timeout.
+      //
+      // A terminal error is readiness too: the card is already showing its error treatment,
+      // so the space opens onto that rather than hiding it until the timeout.
+      var isRevealReady = this.state.failedFileId === id || this.state.previewRenderedFileId === id && !!node.attrs.width && !!node.attrs.height;
       if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
-        return /*#__PURE__*/React.createElement(MediaCardWrapper, {
+        return /*#__PURE__*/React.createElement(GeneratedMediaReveal, {
+          isEnabled: hasGeneratedMediaMotion,
+          isReady: isRevealReady,
+          mediaKey: id
+        }, /*#__PURE__*/React.createElement(MediaCardWrapper, {
           dimensions: originalDimensions,
           borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
           selected: selected
         }, /*#__PURE__*/React.createElement(CardLoading, {
           interactionName: "editor-media-card-loading"
-        }));
+        })));
       }
       var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
       var identifier = type === 'external' ? {
@@ -434,7 +542,11 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       // generic media type icon isn't shown while the image streams in. Gated on the
       // existing infographics experiment.
       var isCWR = !!this.props.isCwrAIGenerating && isExperimentEnabled('aifc_page_create_with_rovo_include_infographics');
-      return /*#__PURE__*/React.createElement(MediaCardWrapper, {
+      return /*#__PURE__*/React.createElement(GeneratedMediaReveal, {
+        isEnabled: hasGeneratedMediaMotion,
+        isReady: isRevealReady,
+        mediaKey: id
+      }, /*#__PURE__*/React.createElement(MediaCardWrapper, {
         dimensions: originalDimensions,
         onContextMenu: this.selectMediaSingle,
         borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
@@ -469,10 +581,11 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
         isAIGenerating: !!this.props.isAIGenerating,
         isCWR: isCWR,
+        hasLoadingMotion: hasGeneratedMediaMotion,
         onPreviewRender: this.onPreviewRender,
         fallbackMediaNameFetcher: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.fallbackMediaNameFetcher,
         onError: this.getMediaRenderErrorHandler()
-      })));
+      }))));
     }
   }]);
 }(Component);

package/dist/esm/ui/GeneratedMediaReveal.compiled.css

@@ -0,0 +1,12 @@
+._18m915vq{overflow-y:hidden}
+._1e0c11p5{display:grid}
+._1o51eoah{animation-fill-mode:backwards}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._1reo15vq{overflow-x:hidden}
+._1tkeidpf{min-height:0}
+._2z0563bf{grid-template-rows:0fr}
+._2z05hkll{grid-template-rows:1fr}
+._5sag15uc{animation-duration:var(--ds-duration-xlong,.4s)}
+._j7hq8gkt{animation-name:kaq7wke}
+@keyframes kaq7wke{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}}