@atlaskit/media-card 81.10.19 → 81.12.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/media-card
 
+## 81.12.0
+
+### Minor Changes
+
+- [`2a1e8245a006e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a1e8245a006e) -
+  Clean up experiment `cc-maui-ai-edit-loading-experiment`. The enabled behaviour is now permanent:
+  media cards and MAUI embeds always render the simple loading bar instead of the spinner/icon
+  carousel, and the AI-edit blanket overlay is always applied when a MAUI app is replaced from the
+  toolbar.
+
+  `@atlaskit/tmp-editor-statsig` removes the `cc-maui-ai-edit-loading-experiment` key from
+  `editorExperimentsConfig`, so reading it via `expValEquals`/`expValEqualsNoExposure` is now a type
+  error — remove those call sites.
+
+  `@atlaskit/media-card` drops its now-unused `@atlaskit/spinner` dependency, and
+  `@atlassian/native-embeds-maui-experience` drops its now-unused `@atlaskit/icon-lab` dependency.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 81.11.0
+
+### Minor Changes
+
+- [`2d026706450c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d026706450c6) -
+  Add the `allowAIGeneratedMediaMotion` media plugin option and the `hasLoadingMotion` card prop, so
+  media that arrives mid-flight opens the document out to make room for itself and then fades its
+  preview in, instead of drawing a loading indicator and snapping into place. Behind
+  `aifc_page_create_defer_generated_visuals`.
+
 ## 81.10.19
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -8,7 +8,7 @@ var _reactIntl = require("react-intl");
 var _mediaCommon = require("@atlaskit/media-common");
 var _CardWithPerformanceObserver = require("./CardWithPerformanceObserver");
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.18";
+var packageVersion = "81.11.0";
 var Card = exports.Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/cardView.js

@@ -16,7 +16,6 @@ var _mediaClient = require("@atlaskit/media-client");
 var _messages = require("@atlaskit/media-ui/messages");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _isUploadError = require("../isUploadError");
@@ -36,6 +35,7 @@ var _PreviewUnavailable = require("./ui/iconMessage/PreviewUnavailable");
 var _iconWrapper = require("./ui/iconWrapper/iconWrapper");
 var _imageRenderer = require("./ui/imageRenderer");
 var _loadingBar = require("./ui/loadingBar/loadingBar");
+var _loadingHold = require("./ui/loadingHold/loadingHold");
 var _openMediaViewerButton = _interopRequireDefault(require("./ui/openMediaViewerButton/openMediaViewerButton"));
 var _playButton = require("./ui/playButton/playButton");
 var _progressBar = require("./ui/progressBar/progressBar");
@@ -99,6 +99,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     traceId = _ref.traceId,
     isAIGenerating = _ref.isAIGenerating,
     isCWR = _ref.isCWR,
+    hasLoadingMotion = _ref.hasLoadingMotion,
     backgroundColor = _ref.backgroundColor;
   var intl = (0, _reactIntl.useIntl)();
   var _useState = (0, _react.useState)(false),
@@ -112,6 +113,18 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var divRef = (0, _react.useRef)(null);
   var prevCardPreviewRef = (0, _react.useRef)();
   var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var isErrorStatus = status === 'error' || status === 'failed-processing';
+  // While the motion owns the loading presentation the card draws nothing of its own — no
+  // indicator, progress bar, type icon or background — so the consumer can open space into
+  // emptiness and fade the preview in over it. Errors keep their normal treatment, or a
+  // failure would be indistinguishable from empty space.
+  //
+  // Every consumer below derives from this, so gating it here enforces the gate at the
+  // component boundary rather than trusting callers to do it. The prop is the left operand
+  // because every media card in every product renders this component — reading the gate
+  // unconditionally would put all of them in its exposure population. `isErrorStatus` is
+  // checked after it, so cards that opted in still count towards that population.
+  var suppressLoadingUI = !!hasLoadingMotion && (0, _fg.fg)('aifc_page_create_defer_generated_visuals') && !isErrorStatus;
   (0, _react.useEffect)(function () {
     // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
     if (prevCardPreviewRef.current && !cardPreview) {
@@ -166,18 +179,20 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     var loadingConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
       renderPlayButton: false,
       renderTypeIcon: false,
-      renderSpinner: !didImageRender && !didSvgRender
+      renderLoading: !didImageRender && !didSvgRender
     });
     switch (status) {
       case 'uploading':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          renderBlanket: !disableOverlay || mediaType !== 'video',
+          renderBlanket: !suppressLoadingUI && (!disableOverlay || mediaType !== 'video'),
           isFixedBlanket: true,
-          renderProgressBar: !isAIGenerating
+          renderProgressBar: !isAIGenerating && !suppressLoadingUI,
+          renderTypeIcon: !suppressLoadingUI && defaultConfig.renderTypeIcon
         });
       case 'processing':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_CreatingPreview.CreatingPreview, {
+          renderTypeIcon: !suppressLoadingUI && defaultConfig.renderTypeIcon,
+          iconMessage: !didImageRender && !isZeroSize && !suppressLoadingUI ? /*#__PURE__*/_react.default.createElement(_CreatingPreview.CreatingPreview, {
             disableAnimation: disableAnimation
           }) : undefined
         });
@@ -236,7 +251,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     iconMessage = _getRenderConfigBySta.iconMessage,
     renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
     renderSvgView = _getRenderConfigBySta.renderSvgView,
-    renderSpinner = _getRenderConfigBySta.renderSpinner,
+    renderLoading = _getRenderConfigBySta.renderLoading,
     renderPlayButton = _getRenderConfigBySta.renderPlayButton,
     renderBlanket = _getRenderConfigBySta.renderBlanket,
     renderProgressBar = _getRenderConfigBySta.renderProgressBar,
@@ -249,9 +264,12 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
 
   // AI border shown while generating; cleared by the decoration on upload completion.
   /* eslint-disable @atlaskit/platform/no-preconditioning -- loading-specific gate (cc-maui-phase-2) layered on the MAUI experiment cohort during phased rollout; preconditioning is intentional and will be removed when the existing gates are cleaned up */
-  var renderAIBorderOverride = !!isAIGenerating && (0, _fg.fg)('cc-maui-phase-2') && (0, _expValEquals.expValEquals)('cc-maui-experiment', 'isEnabled', true);
+  var renderAIBorderOverride = !!isAIGenerating && (0, _fg.fg)('cc-maui-phase-2') && (0, _expValEquals.expValEquals)('cc-maui-experiment', 'isEnabled', true) &&
+  // Last so the gates above are still evaluated, and their exposures still fire, on
+  // surfaces that suppress the overlay.
+  !suppressLoadingUI;
   /* eslint-enable @atlaskit/platform/no-preconditioning */
-  var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  var shouldDisplayBackground = status === 'error' || status === 'failed-processing' || !suppressLoadingUI && (!cardPreview || !disableOverlay);
   var isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   var _ref4 = metadata || {},
@@ -291,6 +309,19 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     setDidSvgRender(true);
     onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
   };
+
+  // Held back until the preview has rendered, then faded in over the card's surface.
+  var mediaMotion;
+  if (suppressLoadingUI) {
+    mediaMotion = didImageRender || didSvgRender ? 'entering' : 'hidden';
+  }
+  var renderLoadingPlaceholder = function renderLoadingPlaceholder() {
+    return /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
+      animationDisabled: disableAnimation,
+      testId: "media-card-loading",
+      interactionName: "media-card-loading"
+    });
+  };
   var contents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_imageContainer.ImageContainer, {
     centerElements: didSvgRender && !(0, _fg.fg)('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
     ,
@@ -300,7 +331,8 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     progress: progress,
     mediaCardCursor: mediaCardCursor,
     selected: selected,
-    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source,
+    mediaMotion: mediaMotion
   }, renderTypeIcon && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
@@ -309,17 +341,13 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && ((0, _expValEquals.expValEquals)('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
-    animationDisabled: disableAnimation,
-    testId: "media-card-loading",
-    interactionName: "media-card-loading"
-  }) : /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasVisibleTitleBox
-  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-    testId: "media-card-loading",
+  }), iconMessage), renderLoading && (suppressLoadingUI ?
+  /*#__PURE__*/
+  // Nothing is drawn, but the interaction still has to be held for the
+  // same window as the indicator it replaces.
+  _react.default.createElement(_loadingHold.LoadingHold, {
     interactionName: "media-card-loading"
-  }))), renderSvgView && identifier && (0, _mediaClient.isFileIdentifier)(identifier) && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
+  }) : renderLoadingPlaceholder()), renderSvgView && identifier && (0, _mediaClient.isFileIdentifier)(identifier) && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,

package/dist/cjs/card/fileCard.js

@@ -97,6 +97,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     backgroundColor = _ref.backgroundColor,
     isAIGenerating = _ref.isAIGenerating,
     isCWR = _ref.isCWR,
+    hasLoadingMotion = _ref.hasLoadingMotion,
     onPreviewRender = _ref.onPreviewRender,
     shouldHideTooltip = _ref.shouldHideTooltip,
     mediaViewerItems = _ref.mediaViewerItems,
@@ -803,7 +804,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       shouldHideTooltip: shouldHideTooltip,
       overriddenCreationDate: overridenDate,
       isAIGenerating: isAIGenerating,
-      isCWR: isCWR
+      isCWR: isCWR,
+      hasLoadingMotion: hasLoadingMotion
     });
     return isLazyWithOverride ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
       cardEl: cardElement,

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.18";
+var packageVersion = "81.11.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/ui/loadingHold/loadingHold.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingHold = void 0;
+var _react = require("react");
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+/**
+ * `useLayoutEffect` in SSR-safe form, matching `LoadingBar` and the DS interaction-tracing
+ * convention.
+ *
+ * @see https://hello.atlassian.net/wiki/spaces/DST/pages/2081696628/DSTDACI-010+-+Interaction+Tracing+hooks+in+DS+components
+ */
+var useLayoutEffect = typeof window === 'undefined' ? _react.useEffect : _react.useLayoutEffect;
+/**
+ * Holds the in-progress interaction while a card is loading, without drawing anything.
+ *
+ * `LoadingBar` and `Spinner` each own a hold for as long as they are mounted. Cards that
+ * express loading through motion instead still need the interaction held for the same window,
+ * so this stands in for them under the same `interactionName` — mounted and unmounted at the
+ * same points, so UFO traces stay comparable either way.
+ */
+var LoadingHold = exports.LoadingHold = function LoadingHold(_ref) {
+  var interactionName = _ref.interactionName;
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  useLayoutEffect(function () {
+    if (interactionContext != null) {
+      return interactionContext.hold(interactionName);
+    }
+  }, [interactionContext, interactionName]);
+  return null;
+};

package/dist/cjs/card/ui/wrapper/imageContainer-compiled.compiled.css

@@ -2,10 +2,17 @@
 ._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1o511hrf{animation-fill-mode:both}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._1reo15vq{overflow-x:hidden}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._5sagi9qs{animation-duration:var(--ds-duration-medium,.2s)}
 ._c71l1osq{max-height:100%}
+._j7hq1bym{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._ju2515uc{animation-delay:var(--ds-duration-xlong,.4s)}
 ._kqswh2mm{position:relative}
-._p12f1osq{max-width:100%}
+._p12f1osq{max-width:100%}
+._tzy4idpf{opacity:0}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}}

package/dist/cjs/card/ui/wrapper/imageContainer-compiled.js

@@ -13,6 +13,12 @@ var _classnames = require("../../classnames");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var imageContainerStyles = null;
 var imageContainerCenterStyles = null;
+
+// Holds the preview back until it has decoded, so it can be faded in rather than appearing the
+// instant it becomes displayable. Nothing is drawn in the meantime — consumers using this
+// motion keep the node out of the layout until the preview is ready.
+var mediaMotionHiddenStyles = null;
+var mediaMotionEnteringStyles = null;
 var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
   var children = _ref.children,
     mediaName = _ref.mediaName,
@@ -21,7 +27,8 @@ var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
     selected = _ref.selected,
     source = _ref.source,
     centerElements = _ref.centerElements,
-    mediaCardCursor = _ref.mediaCardCursor;
+    mediaCardCursor = _ref.mediaCardCursor,
+    mediaMotion = _ref.mediaMotion;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": _classnames.fileCardImageViewSelector
     /**
@@ -31,7 +38,7 @@ var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
      */
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko18qm _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", _classnames.fileCardImageViewSelector]),
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko18qm _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", mediaMotion === 'hidden' && "_tzy4idpf", mediaMotion === 'entering' && "_j7hq1bym _5sagi9qs _1pglindk _ju2515uc _1o511hrf _1bumglyw", _classnames.fileCardImageViewSelector]),
     "data-test-media-name": mediaName,
     "data-test-status": status,
     "data-test-progress": progress,

package/dist/cjs/inline/loader.js

@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "81.10.18",
+        packageName: "81.11.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/lightCards/cardLoading.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardLoading = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _loadingBar = require("../../card/ui/loadingBar/loadingBar");
 var _getDimensionsWithDefault = require("./getDimensionsWithDefault");
 var _lightCardWrappers = require("./lightCardWrappers");
@@ -21,9 +19,7 @@ var CardLoading = exports.CardLoading = function CardLoading(_ref) {
     "data-test-loading": true,
     dimensions: dimensions,
     "data-vc": "media-card-loading"
-  }, (0, _expValEquals.expValEquals)('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
-    interactionName: interactionName || 'media-card-loading'
-  }) : /*#__PURE__*/_react.default.createElement(_spinner.default, {
+  }, /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
     interactionName: interactionName || 'media-card-loading'
   }));
 };

package/dist/cjs/utils/ufoExperiences.js

@@ -23,7 +23,7 @@ var _getMediaGlobalScope = require("./globalScope/getMediaGlobalScope");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.18";
+var packageVersion = "81.11.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.18";
+const packageVersion = "81.11.0";
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/cardView.js

@@ -6,7 +6,6 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { messages } from '@atlaskit/media-ui/messages';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { isUploadError } from '../isUploadError';
@@ -26,6 +25,7 @@ import { PreviewUnavailable } from './ui/iconMessage/PreviewUnavailable';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { ImageRenderer } from './ui/imageRenderer';
 import { LoadingBar } from './ui/loadingBar/loadingBar';
+import { LoadingHold } from './ui/loadingHold/loadingHold';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 import { PlayButton } from './ui/playButton/playButton';
 import { ProgressBar } from './ui/progressBar/progressBar';
@@ -84,6 +84,7 @@ export const CardViewBase = ({
   traceId,
   isAIGenerating,
   isCWR,
+  hasLoadingMotion,
   backgroundColor
 }) => {
   const intl = useIntl();
@@ -92,6 +93,18 @@ export const CardViewBase = ({
   const divRef = useRef(null);
   const prevCardPreviewRef = useRef();
   const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  const isErrorStatus = status === 'error' || status === 'failed-processing';
+  // While the motion owns the loading presentation the card draws nothing of its own — no
+  // indicator, progress bar, type icon or background — so the consumer can open space into
+  // emptiness and fade the preview in over it. Errors keep their normal treatment, or a
+  // failure would be indistinguishable from empty space.
+  //
+  // Every consumer below derives from this, so gating it here enforces the gate at the
+  // component boundary rather than trusting callers to do it. The prop is the left operand
+  // because every media card in every product renders this component — reading the gate
+  // unconditionally would put all of them in its exposure population. `isErrorStatus` is
+  // checked after it, so cards that opted in still count towards that population.
+  const suppressLoadingUI = !!hasLoadingMotion && fg('aifc_page_create_defer_generated_visuals') && !isErrorStatus;
   useEffect(() => {
     // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
     if (prevCardPreviewRef.current && !cardPreview) {
@@ -149,20 +162,22 @@ export const CardViewBase = ({
       ...defaultConfig,
       renderPlayButton: false,
       renderTypeIcon: false,
-      renderSpinner: !didImageRender && !didSvgRender
+      renderLoading: !didImageRender && !didSvgRender
     };
     switch (status) {
       case 'uploading':
         return {
           ...defaultConfig,
-          renderBlanket: !disableOverlay || mediaType !== 'video',
+          renderBlanket: !suppressLoadingUI && (!disableOverlay || mediaType !== 'video'),
           isFixedBlanket: true,
-          renderProgressBar: !isAIGenerating
+          renderProgressBar: !isAIGenerating && !suppressLoadingUI,
+          renderTypeIcon: !suppressLoadingUI && defaultConfig.renderTypeIcon
         };
       case 'processing':
         return {
           ...defaultConfig,
-          iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+          renderTypeIcon: !suppressLoadingUI && defaultConfig.renderTypeIcon,
+          iconMessage: !didImageRender && !isZeroSize && !suppressLoadingUI ? /*#__PURE__*/React.createElement(CreatingPreview, {
             disableAnimation: disableAnimation
           }) : undefined
         };
@@ -224,7 +239,7 @@ export const CardViewBase = ({
     iconMessage,
     renderImageRenderer,
     renderSvgView,
-    renderSpinner,
+    renderLoading,
     renderPlayButton,
     renderBlanket,
     renderProgressBar,
@@ -238,9 +253,12 @@ export const CardViewBase = ({
 
   // AI border shown while generating; cleared by the decoration on upload completion.
   /* eslint-disable @atlaskit/platform/no-preconditioning -- loading-specific gate (cc-maui-phase-2) layered on the MAUI experiment cohort during phased rollout; preconditioning is intentional and will be removed when the existing gates are cleaned up */
-  const renderAIBorderOverride = !!isAIGenerating && fg('cc-maui-phase-2') && expValEquals('cc-maui-experiment', 'isEnabled', true);
+  const renderAIBorderOverride = !!isAIGenerating && fg('cc-maui-phase-2') && expValEquals('cc-maui-experiment', 'isEnabled', true) &&
+  // Last so the gates above are still evaluated, and their exposures still fire, on
+  // surfaces that suppress the overlay.
+  !suppressLoadingUI;
   /* eslint-enable @atlaskit/platform/no-preconditioning */
-  const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  const shouldDisplayBackground = status === 'error' || status === 'failed-processing' || !suppressLoadingUI && (!cardPreview || !disableOverlay);
   const isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
   const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   const {
@@ -280,6 +298,17 @@ export const CardViewBase = ({
     setDidSvgRender(true);
     onSvgLoad === null || onSvgLoad === void 0 ? void 0 : onSvgLoad();
   };
+
+  // Held back until the preview has rendered, then faded in over the card's surface.
+  let mediaMotion;
+  if (suppressLoadingUI) {
+    mediaMotion = didImageRender || didSvgRender ? 'entering' : 'hidden';
+  }
+  const renderLoadingPlaceholder = () => /*#__PURE__*/React.createElement(LoadingBar, {
+    animationDisabled: disableAnimation,
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
+  });
   const contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
     centerElements: didSvgRender && !fg('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
     ,
@@ -289,7 +318,8 @@ export const CardViewBase = ({
     progress: progress,
     mediaCardCursor: mediaCardCursor,
     selected: selected,
-    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source,
+    mediaMotion: mediaMotion
   }, renderTypeIcon && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
@@ -298,17 +328,13 @@ export const CardViewBase = ({
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && (expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
-    animationDisabled: disableAnimation,
-    testId: "media-card-loading",
-    interactionName: "media-card-loading"
-  }) : /*#__PURE__*/React.createElement(IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasVisibleTitleBox
-  }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-    testId: "media-card-loading",
+  }), iconMessage), renderLoading && (suppressLoadingUI ?
+  /*#__PURE__*/
+  // Nothing is drawn, but the interaction still has to be held for the
+  // same window as the indicator it replaces.
+  React.createElement(LoadingHold, {
     interactionName: "media-card-loading"
-  }))), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
+  }) : renderLoadingPlaceholder()), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,

package/dist/es2019/card/fileCard.js

@@ -78,6 +78,7 @@ export const FileCard = ({
   backgroundColor,
   isAIGenerating,
   isCWR,
+  hasLoadingMotion,
   onPreviewRender,
   shouldHideTooltip,
   mediaViewerItems,
@@ -718,7 +719,8 @@ export const FileCard = ({
       shouldHideTooltip: shouldHideTooltip,
       overriddenCreationDate: overridenDate,
       isAIGenerating: isAIGenerating,
-      isCWR: isCWR
+      isCWR: isCWR,
+      hasLoadingMotion: hasLoadingMotion
     });
     return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
       cardEl: cardElement,

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.18";
+const packageVersion = "81.11.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/loadingHold/loadingHold.js

@@ -0,0 +1,29 @@
+import { useContext, useEffect, useLayoutEffect as useRealLayoutEffect } from 'react';
+import InteractionContext from '@atlaskit/interaction-context';
+
+/**
+ * `useLayoutEffect` in SSR-safe form, matching `LoadingBar` and the DS interaction-tracing
+ * convention.
+ *
+ * @see https://hello.atlassian.net/wiki/spaces/DST/pages/2081696628/DSTDACI-010+-+Interaction+Tracing+hooks+in+DS+components
+ */
+const useLayoutEffect = typeof window === 'undefined' ? useEffect : useRealLayoutEffect;
+/**
+ * Holds the in-progress interaction while a card is loading, without drawing anything.
+ *
+ * `LoadingBar` and `Spinner` each own a hold for as long as they are mounted. Cards that
+ * express loading through motion instead still need the interaction held for the same window,
+ * so this stands in for them under the same `interactionName` — mounted and unmounted at the
+ * same points, so UFO traces stay comparable either way.
+ */
+export const LoadingHold = ({
+  interactionName
+}) => {
+  const interactionContext = useContext(InteractionContext);
+  useLayoutEffect(() => {
+    if (interactionContext != null) {
+      return interactionContext.hold(interactionName);
+    }
+  }, [interactionContext, interactionName]);
+  return null;
+};

package/dist/es2019/card/ui/wrapper/imageContainer-compiled.compiled.css

@@ -2,10 +2,17 @@
 ._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1o511hrf{animation-fill-mode:both}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._1reo15vq{overflow-x:hidden}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._5sagi9qs{animation-duration:var(--ds-duration-medium,.2s)}
 ._c71l1osq{max-height:100%}
+._j7hq1bym{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._ju2515uc{animation-delay:var(--ds-duration-xlong,.4s)}
 ._kqswh2mm{position:relative}
-._p12f1osq{max-width:100%}
+._p12f1osq{max-width:100%}
+._tzy4idpf{opacity:0}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}}

package/dist/es2019/card/ui/wrapper/imageContainer-compiled.js

@@ -5,6 +5,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import { fileCardImageViewSelector } from '../../classnames';
 const imageContainerStyles = null;
 const imageContainerCenterStyles = null;
+
+// Holds the preview back until it has decoded, so it can be faded in rather than appearing the
+// instant it becomes displayable. Nothing is drawn in the meantime — consumers using this
+// motion keep the node out of the layout until the preview is ready.
+const mediaMotionHiddenStyles = null;
+const mediaMotionEnteringStyles = null;
 export const ImageContainer = ({
   children,
   mediaName,
@@ -13,7 +19,8 @@ export const ImageContainer = ({
   selected,
   source,
   centerElements,
-  mediaCardCursor
+  mediaCardCursor,
+  mediaMotion
 }) => /*#__PURE__*/React.createElement("div", {
   "data-testid": fileCardImageViewSelector
   /**
@@ -23,7 +30,7 @@ export const ImageContainer = ({
    */
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,
-  className: ax(["_1reo15vq _18m915vq _2rko18qm _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", fileCardImageViewSelector]),
+  className: ax(["_1reo15vq _18m915vq _2rko18qm _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", mediaMotion === 'hidden' && "_tzy4idpf", mediaMotion === 'entering' && "_j7hq1bym _5sagi9qs _1pglindk _ju2515uc _1o511hrf _1bumglyw", fileCardImageViewSelector]),
   "data-test-media-name": mediaName,
   "data-test-status": status,
   "data-test-progress": progress,

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "81.10.18",
+      packageName: "81.11.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/lightCards/cardLoading.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { LoadingBar } from '../../card/ui/loadingBar/loadingBar';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 import { Wrapper } from './lightCardWrappers';
@@ -15,9 +13,7 @@ export const CardLoading = ({
     "data-test-loading": true,
     dimensions: dimensions,
     "data-vc": "media-card-loading"
-  }, expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
-    interactionName: interactionName || 'media-card-loading'
-  }) : /*#__PURE__*/React.createElement(SpinnerIcon, {
+  }, /*#__PURE__*/React.createElement(LoadingBar, {
     interactionName: interactionName || 'media-card-loading'
   }));
 };

package/dist/es2019/utils/ufoExperiences.js

@@ -12,7 +12,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
 import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
 import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.18";
+const packageVersion = "81.11.0";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.18";
+var packageVersion = "81.11.0";
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/cardView.js

@@ -10,7 +10,6 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { messages } from '@atlaskit/media-ui/messages';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { isUploadError } from '../isUploadError';
@@ -30,6 +29,7 @@ import { PreviewUnavailable } from './ui/iconMessage/PreviewUnavailable';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { ImageRenderer } from './ui/imageRenderer';
 import { LoadingBar } from './ui/loadingBar/loadingBar';
+import { LoadingHold } from './ui/loadingHold/loadingHold';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 import { PlayButton } from './ui/playButton/playButton';
 import { ProgressBar } from './ui/progressBar/progressBar';
@@ -90,6 +90,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     traceId = _ref.traceId,
     isAIGenerating = _ref.isAIGenerating,
     isCWR = _ref.isCWR,
+    hasLoadingMotion = _ref.hasLoadingMotion,
     backgroundColor = _ref.backgroundColor;
   var intl = useIntl();
   var _useState = useState(false),
@@ -103,6 +104,18 @@ export var CardViewBase = function CardViewBase(_ref) {
   var divRef = useRef(null);
   var prevCardPreviewRef = useRef();
   var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var isErrorStatus = status === 'error' || status === 'failed-processing';
+  // While the motion owns the loading presentation the card draws nothing of its own — no
+  // indicator, progress bar, type icon or background — so the consumer can open space into
+  // emptiness and fade the preview in over it. Errors keep their normal treatment, or a
+  // failure would be indistinguishable from empty space.
+  //
+  // Every consumer below derives from this, so gating it here enforces the gate at the
+  // component boundary rather than trusting callers to do it. The prop is the left operand
+  // because every media card in every product renders this component — reading the gate
+  // unconditionally would put all of them in its exposure population. `isErrorStatus` is
+  // checked after it, so cards that opted in still count towards that population.
+  var suppressLoadingUI = !!hasLoadingMotion && fg('aifc_page_create_defer_generated_visuals') && !isErrorStatus;
   useEffect(function () {
     // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
     if (prevCardPreviewRef.current && !cardPreview) {
@@ -157,18 +170,20 @@ export var CardViewBase = function CardViewBase(_ref) {
     var loadingConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
       renderPlayButton: false,
       renderTypeIcon: false,
-      renderSpinner: !didImageRender && !didSvgRender
+      renderLoading: !didImageRender && !didSvgRender
     });
     switch (status) {
       case 'uploading':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          renderBlanket: !disableOverlay || mediaType !== 'video',
+          renderBlanket: !suppressLoadingUI && (!disableOverlay || mediaType !== 'video'),
           isFixedBlanket: true,
-          renderProgressBar: !isAIGenerating
+          renderProgressBar: !isAIGenerating && !suppressLoadingUI,
+          renderTypeIcon: !suppressLoadingUI && defaultConfig.renderTypeIcon
         });
       case 'processing':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+          renderTypeIcon: !suppressLoadingUI && defaultConfig.renderTypeIcon,
+          iconMessage: !didImageRender && !isZeroSize && !suppressLoadingUI ? /*#__PURE__*/React.createElement(CreatingPreview, {
             disableAnimation: disableAnimation
           }) : undefined
         });
@@ -227,7 +242,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     iconMessage = _getRenderConfigBySta.iconMessage,
     renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
     renderSvgView = _getRenderConfigBySta.renderSvgView,
-    renderSpinner = _getRenderConfigBySta.renderSpinner,
+    renderLoading = _getRenderConfigBySta.renderLoading,
     renderPlayButton = _getRenderConfigBySta.renderPlayButton,
     renderBlanket = _getRenderConfigBySta.renderBlanket,
     renderProgressBar = _getRenderConfigBySta.renderProgressBar,
@@ -240,9 +255,12 @@ export var CardViewBase = function CardViewBase(_ref) {
 
   // AI border shown while generating; cleared by the decoration on upload completion.
   /* eslint-disable @atlaskit/platform/no-preconditioning -- loading-specific gate (cc-maui-phase-2) layered on the MAUI experiment cohort during phased rollout; preconditioning is intentional and will be removed when the existing gates are cleaned up */
-  var renderAIBorderOverride = !!isAIGenerating && fg('cc-maui-phase-2') && expValEquals('cc-maui-experiment', 'isEnabled', true);
+  var renderAIBorderOverride = !!isAIGenerating && fg('cc-maui-phase-2') && expValEquals('cc-maui-experiment', 'isEnabled', true) &&
+  // Last so the gates above are still evaluated, and their exposures still fire, on
+  // surfaces that suppress the overlay.
+  !suppressLoadingUI;
   /* eslint-enable @atlaskit/platform/no-preconditioning */
-  var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  var shouldDisplayBackground = status === 'error' || status === 'failed-processing' || !suppressLoadingUI && (!cardPreview || !disableOverlay);
   var isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   var _ref4 = metadata || {},
@@ -282,6 +300,19 @@ export var CardViewBase = function CardViewBase(_ref) {
     setDidSvgRender(true);
     onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
   };
+
+  // Held back until the preview has rendered, then faded in over the card's surface.
+  var mediaMotion;
+  if (suppressLoadingUI) {
+    mediaMotion = didImageRender || didSvgRender ? 'entering' : 'hidden';
+  }
+  var renderLoadingPlaceholder = function renderLoadingPlaceholder() {
+    return /*#__PURE__*/React.createElement(LoadingBar, {
+      animationDisabled: disableAnimation,
+      testId: "media-card-loading",
+      interactionName: "media-card-loading"
+    });
+  };
   var contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
     centerElements: didSvgRender && !fg('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
     ,
@@ -291,7 +322,8 @@ export var CardViewBase = function CardViewBase(_ref) {
     progress: progress,
     mediaCardCursor: mediaCardCursor,
     selected: selected,
-    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source,
+    mediaMotion: mediaMotion
   }, renderTypeIcon && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
@@ -300,17 +332,13 @@ export var CardViewBase = function CardViewBase(_ref) {
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && (expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
-    animationDisabled: disableAnimation,
-    testId: "media-card-loading",
-    interactionName: "media-card-loading"
-  }) : /*#__PURE__*/React.createElement(IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasVisibleTitleBox
-  }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-    testId: "media-card-loading",
+  }), iconMessage), renderLoading && (suppressLoadingUI ?
+  /*#__PURE__*/
+  // Nothing is drawn, but the interaction still has to be held for the
+  // same window as the indicator it replaces.
+  React.createElement(LoadingHold, {
     interactionName: "media-card-loading"
-  }))), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
+  }) : renderLoadingPlaceholder()), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,

package/dist/esm/card/fileCard.js

@@ -89,6 +89,7 @@ export var FileCard = function FileCard(_ref) {
     backgroundColor = _ref.backgroundColor,
     isAIGenerating = _ref.isAIGenerating,
     isCWR = _ref.isCWR,
+    hasLoadingMotion = _ref.hasLoadingMotion,
     onPreviewRender = _ref.onPreviewRender,
     shouldHideTooltip = _ref.shouldHideTooltip,
     mediaViewerItems = _ref.mediaViewerItems,
@@ -795,7 +796,8 @@ export var FileCard = function FileCard(_ref) {
       shouldHideTooltip: shouldHideTooltip,
       overriddenCreationDate: overridenDate,
       isAIGenerating: isAIGenerating,
-      isCWR: isCWR
+      isCWR: isCWR,
+      hasLoadingMotion: hasLoadingMotion
     });
     return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
       cardEl: cardElement,

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.18";
+var packageVersion = "81.11.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/loadingHold/loadingHold.js

@@ -0,0 +1,28 @@
+import { useContext, useEffect, useLayoutEffect as useRealLayoutEffect } from 'react';
+import InteractionContext from '@atlaskit/interaction-context';
+
+/**
+ * `useLayoutEffect` in SSR-safe form, matching `LoadingBar` and the DS interaction-tracing
+ * convention.
+ *
+ * @see https://hello.atlassian.net/wiki/spaces/DST/pages/2081696628/DSTDACI-010+-+Interaction+Tracing+hooks+in+DS+components
+ */
+var useLayoutEffect = typeof window === 'undefined' ? useEffect : useRealLayoutEffect;
+/**
+ * Holds the in-progress interaction while a card is loading, without drawing anything.
+ *
+ * `LoadingBar` and `Spinner` each own a hold for as long as they are mounted. Cards that
+ * express loading through motion instead still need the interaction held for the same window,
+ * so this stands in for them under the same `interactionName` — mounted and unmounted at the
+ * same points, so UFO traces stay comparable either way.
+ */
+export var LoadingHold = function LoadingHold(_ref) {
+  var interactionName = _ref.interactionName;
+  var interactionContext = useContext(InteractionContext);
+  useLayoutEffect(function () {
+    if (interactionContext != null) {
+      return interactionContext.hold(interactionName);
+    }
+  }, [interactionContext, interactionName]);
+  return null;
+};

package/dist/esm/card/ui/wrapper/imageContainer-compiled.compiled.css

@@ -2,10 +2,17 @@
 ._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1o511hrf{animation-fill-mode:both}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._1reo15vq{overflow-x:hidden}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._5sagi9qs{animation-duration:var(--ds-duration-medium,.2s)}
 ._c71l1osq{max-height:100%}
+._j7hq1bym{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._ju2515uc{animation-delay:var(--ds-duration-xlong,.4s)}
 ._kqswh2mm{position:relative}
-._p12f1osq{max-width:100%}
+._p12f1osq{max-width:100%}
+._tzy4idpf{opacity:0}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}}

package/dist/esm/card/ui/wrapper/imageContainer-compiled.js

@@ -5,6 +5,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import { fileCardImageViewSelector } from '../../classnames';
 var imageContainerStyles = null;
 var imageContainerCenterStyles = null;
+
+// Holds the preview back until it has decoded, so it can be faded in rather than appearing the
+// instant it becomes displayable. Nothing is drawn in the meantime — consumers using this
+// motion keep the node out of the layout until the preview is ready.
+var mediaMotionHiddenStyles = null;
+var mediaMotionEnteringStyles = null;
 export var ImageContainer = function ImageContainer(_ref) {
   var children = _ref.children,
     mediaName = _ref.mediaName,
@@ -13,7 +19,8 @@ export var ImageContainer = function ImageContainer(_ref) {
     selected = _ref.selected,
     source = _ref.source,
     centerElements = _ref.centerElements,
-    mediaCardCursor = _ref.mediaCardCursor;
+    mediaCardCursor = _ref.mediaCardCursor,
+    mediaMotion = _ref.mediaMotion;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": fileCardImageViewSelector
     /**
@@ -23,7 +30,7 @@ export var ImageContainer = function ImageContainer(_ref) {
      */
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_1reo15vq _18m915vq _2rko18qm _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", fileCardImageViewSelector]),
+    className: ax(["_1reo15vq _18m915vq _2rko18qm _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", mediaMotion === 'hidden' && "_tzy4idpf", mediaMotion === 'entering' && "_j7hq1bym _5sagi9qs _1pglindk _ju2515uc _1o511hrf _1bumglyw", fileCardImageViewSelector]),
     "data-test-media-name": mediaName,
     "data-test-status": status,
     "data-test-progress": progress,

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "81.10.18",
+        packageName: "81.11.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/lightCards/cardLoading.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { LoadingBar } from '../../card/ui/loadingBar/loadingBar';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 import { Wrapper } from './lightCardWrappers';
@@ -14,9 +12,7 @@ export var CardLoading = function CardLoading(_ref) {
     "data-test-loading": true,
     dimensions: dimensions,
     "data-vc": "media-card-loading"
-  }, expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
-    interactionName: interactionName || 'media-card-loading'
-  }) : /*#__PURE__*/React.createElement(SpinnerIcon, {
+  }, /*#__PURE__*/React.createElement(LoadingBar, {
     interactionName: interactionName || 'media-card-loading'
   }));
 };

package/dist/esm/utils/ufoExperiences.js

@@ -16,7 +16,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
 import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
 import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.18";
+var packageVersion = "81.11.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/cardView.d.ts

@@ -46,6 +46,7 @@ export interface CardViewProps {
     overriddenCreationDate?: number;
     readonly isAIGenerating?: boolean;
     readonly isCWR?: boolean;
+    readonly hasLoadingMotion?: boolean;
 }
 export type CardViewBaseProps = CardViewProps & WithAnalyticsEventsProps;
 type TraceTooltipVariant = 'preview-unavailable' | 'failed-to-load';
@@ -60,12 +61,12 @@ export interface RenderConfigByStatus {
     isFixedBlanket?: boolean;
     renderProgressBar?: boolean;
     renderAIBorder?: boolean;
-    renderSpinner?: boolean;
+    renderLoading?: boolean;
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
     traceTooltipVariant?: TraceTooltipVariant;
 }
-export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, onFocus, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, isCWR, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
+export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, onFocus, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, isCWR, hasLoadingMotion, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
 export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export {};

package/dist/types/card/fileCard.d.ts

@@ -40,6 +40,11 @@ export interface FileCardProps extends CardEventProps {
     readonly isAIGenerating?: boolean;
     /** Marks the card as part of the CWR (create-with-Rovo) infographics flow. */
     readonly isCWR?: boolean;
+    /**
+     * Drops the loading indicator and fades the preview in over the card's surface instead.
+     * Also behind `aifc_page_create_defer_generated_visuals`.
+     */
+    readonly hasLoadingMotion?: boolean;
     /** Callback fired when the media card's image preview has rendered. */
     readonly onPreviewRender?: (fileId: string) => void;
     /** Instance of file identifier. */
@@ -93,4 +98,4 @@ export interface FileCardProps extends CardEventProps {
      */
     readonly fallbackMediaNameFetcher?: (id: string) => Promise<string>;
 }
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, isCWR, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, onFocus, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, ssrMediaItem, onError, mediaViewerExtensions, fallbackMediaNameFetcher, }: FileCardProps) => React.JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, isCWR, hasLoadingMotion, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, onFocus, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, ssrMediaItem, onError, mediaViewerExtensions, fallbackMediaNameFetcher, }: FileCardProps) => React.JSX.Element;

package/dist/types/card/ui/loadingHold/loadingHold.d.ts

@@ -0,0 +1,12 @@
+export type LoadingHoldProps = {
+    interactionName?: string;
+};
+/**
+ * Holds the in-progress interaction while a card is loading, without drawing anything.
+ *
+ * `LoadingBar` and `Spinner` each own a hold for as long as they are mounted. Cards that
+ * express loading through motion instead still need the interaction held for the same window,
+ * so this stands in for them under the same `interactionName` — mounted and unmounted at the
+ * same points, so UFO traces stay comparable either way.
+ */
+export declare const LoadingHold: ({ interactionName }: LoadingHoldProps) => null;

package/dist/types/card/ui/wrapper/imageContainer-compiled.d.ts

@@ -9,6 +9,11 @@ type ImageContainerProps = {
     progress?: number;
     selected?: boolean;
     source?: string;
+    /**
+     * Entering motion for the media preview: `hidden` while it is still loading, `entering`
+     * once it has rendered. Undefined opts out entirely.
+     */
+    mediaMotion?: 'hidden' | 'entering';
 };
-export declare const ImageContainer: ({ children, mediaName, status, progress, selected, source, centerElements, mediaCardCursor, }: ImageContainerProps) => JSX.Element;
+export declare const ImageContainer: ({ children, mediaName, status, progress, selected, source, centerElements, mediaCardCursor, mediaMotion, }: ImageContainerProps) => JSX.Element;
 export {};

package/dist/types/card/ui/wrapper/imageContainer.d.ts

@@ -10,6 +10,7 @@ type ImageContainerProps = {
     progress?: number;
     selected?: boolean;
     source?: string;
+    mediaMotion?: 'hidden' | 'entering';
 };
 export declare const ImageContainer: (props: ImageContainerProps) => React.JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -70,6 +70,7 @@ export interface SharedCardProps {
     readonly titleBoxIcon?: TitleBoxIcon;
     readonly isAIGenerating?: boolean;
     readonly isCWR?: boolean;
+    readonly hasLoadingMotion?: boolean;
     readonly onPreviewRender?: (fileId: string) => void;
     readonly viewerOptions?: ViewerOptionsProps;
     /** Sets options for viewer **/

package/example-helpers/index.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-line no-console
 
 import React, { type PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
 
 import { payloadPublisher } from '@atlassian/ufo/publisher';
 
@@ -149,14 +150,16 @@ export const MainWrapper = ({
 }: MainWrapperProps): React.JSX.Element => {
 	enableMediaUfoLogger(payloadPublisher);
 	return (
-		<>
+		// `react-intl` is a peer dependency of this package — the card's loading bar localises its
+		// aria-label via `useIntl`, so examples need a provider in the ancestry.
+		<IntlProvider locale="en">
 			{developmentOnly && <DevelopmentUseMessage />}
 			{!disableFeatureFlagWrapper ? (
 				<FeatureFlagsWrapper>{children}</FeatureFlagsWrapper>
 			) : (
 				<>{children}</>
 			)}
-		</>
+		</IntlProvider>
 	);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "81.10.19",
+	"version": "81.12.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,9 +50,8 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.10.0",
 		"@atlaskit/section-message": "^10.2.0",
-		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^192.0.0",
+		"@atlaskit/tmp-editor-statsig": "^193.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/ufo": "^1.2.0",
@@ -106,6 +105,10 @@
 		"wait-for-expect": "^1.2.0"
 	},
 	"platform-feature-flags": {
+		"aifc_page_create_defer_generated_visuals": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"cc-maui-phase-2": {
 			"type": "boolean"
 		},