@atlaskit/media-card 80.7.5 → 80.8.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-card
 
+## 80.8.0
+
+### Minor Changes
+
+- [`a826d67f22cc9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a826d67f22cc9) -
+  Replace the legacy circular spinner in `CardView` and `CardLoading` with a bottom-aligned grey
+  loading bar when `cc-maui-ai-edit-loading-experiment.isEnabled` is on. The bar is 6px to match the
+  native-embed loading bar, and the media card loading/placeholder background now uses
+  `elevation.surface.sunken`. Registers `cc-maui-ai-edit-loading-experiment` in
+  `@atlaskit/tmp-editor-statsig`.
+
+  Round the ends (pill radius) of the MAUI loading bars so the media-card loading bar, native-embed
+  loading bar, and AI generating overlay bars are visually consistent.
+
+  The loading bar now holds a named UFO interaction while shown (matching the spinner's
+  `interactionName`) so media loading stays attributed in performance metrics.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 80.7.5
 
 ### Patch Changes

package/dist/cjs/card/ai-generating-overlay/AIGeneratingOverlay.compiled.css

@@ -1,6 +1,6 @@
 
 ._1r04idpf{inset:0}
-._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._y44v15mx{animation:var(--_1aqqhnb)}._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}

package/dist/cjs/card/ai-generating-overlay/AIGeneratingOverlay.js

@@ -34,7 +34,7 @@ function AIGeneratingOverlay(_ref) {
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     "data-testid": "ai-generating-overlay-progress-bar",
-    className: (0, _runtime.ax)(["_2rkolb4i _1reo15vq _18m915vq _1bsb1lk2 _4t3ii2wt _kqswh2mm _bfhk15uy"])
+    className: (0, _runtime.ax)(["_2rko1rr0 _1reo15vq _18m915vq _1bsb1lk2 _4t3ii2wt _kqswh2mm _bfhk15uy"])
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "ai-generating-overlay-train",
     className: (0, _runtime.ax)(["_y44v15mx _1e0c1txw _kqswstnw _154iidpf _4t3i1osq"]),

package/dist/cjs/card/card.js

@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 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 packageName = "@atlaskit/media-card";
-var packageVersion = "80.7.4";
+var packageVersion = "80.7.5";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -21,6 +21,7 @@ var _analytics = require("../utils/analytics");
 var _imageRenderer = require("./ui/imageRenderer");
 var _titleBox = require("./ui/titleBox/titleBox");
 var _failedTitleBox = require("./ui/titleBox/failedTitleBox");
+var _loadingBar = require("./ui/loadingBar/loadingBar");
 var _progressBar = require("./ui/progressBar/progressBar");
 var _playButton = require("./ui/playButton/playButton");
 var _tickBox = require("./ui/tickBox/tickBox");
@@ -301,13 +302,17 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
+  }), 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",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && (0, _mediaClient.isFileIdentifier)(identifier) && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
+  }))), renderSvgView && identifier && (0, _mediaClient.isFileIdentifier)(identifier) && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,

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 = "80.7.4";
+var packageVersion = "80.7.5";
 
 // @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/loadingBar/loadingBar.compiled.css

@@ -0,0 +1,13 @@
+
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._v564aq9m{transition:width .8s}._18m915vq{overflow-y:hidden}
+._1bsb1lk2{width:95%}
+._1e0c1ule{display:block}
+._1ltv1ghs{left:2.5%}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._4t3ii2wt{height:6px}
+._94n5u2gc{bottom:var(--ds-space-100,8px)}
+._bfhk10ef{background-color:var(--ds-background-accent-gray-subtler-hovered,#b7b9be)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,91 @@
+/* loadingBar.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingBar = void 0;
+require("./loadingBar.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+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 TICK_INTERVAL_MS = 1000;
+var STATIC_PROGRESS_VALUE = 0.9;
+
+/**
+ * `useLayoutEffect` is being used in SSR safe form. On the server, this work doesn’t need to run.
+ * `useEffect` is used in-place, because `useEffect` is not run on the server and it matches types
+ * which makes things simpler than doing an `isServer` check or a `null` check.
+ *
+ * @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;
+var messages = (0, _reactIntl.defineMessages)({
+  loadingBarLabel: {
+    id: 'fabric.media.loading_bar_label',
+    defaultMessage: 'Loading',
+    description: 'Aria label for the loading bar shown while a media card is loading'
+  }
+});
+var trackStyles = null;
+var fillStyles = null;
+var clampToPercent = function clampToPercent(progress) {
+  return Math.min(1, Math.max(0, progress)) * 100;
+};
+var LoadingBar = exports.LoadingBar = function LoadingBar(_ref) {
+  var _ref$animationDisable = _ref.animationDisabled,
+    animationDisabled = _ref$animationDisable === void 0 ? false : _ref$animationDisable,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName;
+  var intl = (0, _reactIntl.useIntl)();
+  var _useState = (0, _react.useState)(animationDisabled ? STATIC_PROGRESS_VALUE : 0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    progress = _useState2[0],
+    setProgress = _useState2[1];
+  var intervalRef = (0, _react.useRef)();
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  useLayoutEffect(function () {
+    if (interactionContext != null) {
+      return interactionContext.hold(interactionName);
+    }
+  }, [interactionContext, interactionName]);
+  (0, _react.useEffect)(function () {
+    if (animationDisabled) {
+      setProgress(STATIC_PROGRESS_VALUE);
+      return;
+    }
+    intervalRef.current = setInterval(function () {
+      setProgress(function (prev) {
+        if (prev < 0.1) {
+          return prev + 0.1;
+        } else if (prev < 0.6) {
+          return prev + 0.35;
+        } else if (prev < 0.9) {
+          return prev + 0.1;
+        }
+        clearInterval(intervalRef.current);
+        return prev;
+      });
+    }, TICK_INTERVAL_MS);
+    return function () {
+      return clearInterval(intervalRef.current);
+    };
+  }, [animationDisabled]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-label": intl.formatMessage(messages.loadingBarLabel),
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _kqswstnw _94n5u2gc _1bsb1lk2 _1ltv1ghs _4t3ii2wt _bfhki8nm"])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "".concat(clampToPercent(progress), "%")
+    },
+    className: (0, _runtime.ax)(["_2rko1rr0 _v564aq9m _1e0c1ule _4t3i1osq _bfhk10ef"])
+  }));
+};

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

@@ -18,7 +18,7 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._4t3ine4n{height:var(--media-wrapper-height)}
 ._5sb1v00u [data-cursor=wait]{cursor:wait}
 ._9m3z1osq>div{width:100%}
-._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1osq{max-height:100%}
 ._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg541i5c:hover .media-card-blanket{background-color:var(--ds-blanket,#050c1f75)}

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

@@ -80,7 +80,7 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhki8nm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
+    className: (0, _runtime.ax)([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
     "data-testid": testId,
     style: _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
     ref: innerRef,

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: "80.7.4",
+        packageName: "80.7.5",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

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

@@ -1,45 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardLoading = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _spinner = _interopRequireDefault(require("@atlaskit/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");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-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); }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var CardLoading = exports.CardLoading = /*#__PURE__*/function (_Component) {
-  function CardLoading() {
-    (0, _classCallCheck2.default)(this, CardLoading);
-    return _callSuper(this, CardLoading, arguments);
-  }
-  (0, _inherits2.default)(CardLoading, _Component);
-  return (0, _createClass2.default)(CardLoading, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        dimensionsProp = _this$props.dimensions,
-        testId = _this$props.testId,
-        interactionName = _this$props.interactionName;
-      var dimensions = (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensionsProp);
-      return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.Wrapper, {
-        "data-testid": testId || 'media-card-loading',
-        "data-test-loading": true,
-        dimensions: dimensions,
-        "data-vc": "media-card-loading"
-      }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-        interactionName: interactionName || 'media-card-loading'
-      }));
-    }
-  }]);
-}(_react.Component);
+var CardLoading = exports.CardLoading = function CardLoading(_ref) {
+  var dimensionsProp = _ref.dimensions,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName;
+  var dimensions = (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensionsProp);
+  return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.Wrapper, {
+    "data-testid": testId || 'media-card-loading',
+    "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, {
+    interactionName: interactionName || 'media-card-loading'
+  }));
+};

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

@@ -13,7 +13,8 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   return (0, _react.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   _mediaUi.center, {
-    background: "var(--ds-background-neutral, #0515240F)",
+    position: 'relative',
+    background: "var(--ds-surface-sunken, #F8F8F8)",
     color: "var(--ds-icon, #292A2E)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/cjs/utils/ufoExperiences.js

@@ -19,7 +19,7 @@ var _globalScope = require("./globalScope/globalScope");
 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 = "80.7.4";
+var packageVersion = "80.7.5";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/ai-generating-overlay/AIGeneratingOverlay.compiled.css

@@ -1,6 +1,6 @@
 
 ._1r04idpf{inset:0}
-._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._y44v1j9w{animation:kq5ip39 1.2s linear infinite}._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}

package/dist/es2019/card/ai-generating-overlay/AIGeneratingOverlay.js

@@ -27,7 +27,7 @@ export function AIGeneratingOverlay({
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     "data-testid": "ai-generating-overlay-progress-bar",
-    className: ax(["_2rkolb4i _1reo15vq _18m915vq _1bsb1lk2 _4t3ii2wt _kqswh2mm _bfhk15uy"])
+    className: ax(["_2rko1rr0 _1reo15vq _18m915vq _1bsb1lk2 _4t3ii2wt _kqswh2mm _bfhk15uy"])
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "ai-generating-overlay-train",
     className: ax(["_y44v1j9w _1e0c1txw _kqswstnw _154iidpf _4t3i1osq"])

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "80.7.4";
+const packageVersion = "80.7.5";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -11,6 +11,7 @@ import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { ImageRenderer } from './ui/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
+import { LoadingBar } from './ui/loadingBar/loadingBar';
 import { ProgressBar } from './ui/progressBar/progressBar';
 import { PlayButton } from './ui/playButton/playButton';
 import { TickBox } from './ui/tickBox/tickBox';
@@ -290,13 +291,17 @@ export const CardViewBase = ({
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && /*#__PURE__*/React.createElement(IconWrapper, {
+  }), 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",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
+  }))), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,

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 = "80.7.4";
+const packageVersion = "80.7.5";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/loadingBar/loadingBar.compiled.css

@@ -0,0 +1,13 @@
+
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._v564aq9m{transition:width .8s}._18m915vq{overflow-y:hidden}
+._1bsb1lk2{width:95%}
+._1e0c1ule{display:block}
+._1ltv1ghs{left:2.5%}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._4t3ii2wt{height:6px}
+._94n5u2gc{bottom:var(--ds-space-100,8px)}
+._bfhk10ef{background-color:var(--ds-background-accent-gray-subtler-hovered,#b7b9be)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,74 @@
+/* loadingBar.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./loadingBar.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useContext, useEffect, useLayoutEffect as useRealLayoutEffect, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import InteractionContext from '@atlaskit/interaction-context';
+const TICK_INTERVAL_MS = 1000;
+const STATIC_PROGRESS_VALUE = 0.9;
+
+/**
+ * `useLayoutEffect` is being used in SSR safe form. On the server, this work doesn’t need to run.
+ * `useEffect` is used in-place, because `useEffect` is not run on the server and it matches types
+ * which makes things simpler than doing an `isServer` check or a `null` check.
+ *
+ * @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;
+const messages = defineMessages({
+  loadingBarLabel: {
+    id: 'fabric.media.loading_bar_label',
+    defaultMessage: 'Loading',
+    description: 'Aria label for the loading bar shown while a media card is loading'
+  }
+});
+const trackStyles = null;
+const fillStyles = null;
+const clampToPercent = progress => Math.min(1, Math.max(0, progress)) * 100;
+export const LoadingBar = ({
+  animationDisabled = false,
+  testId,
+  interactionName
+}) => {
+  const intl = useIntl();
+  const [progress, setProgress] = useState(animationDisabled ? STATIC_PROGRESS_VALUE : 0);
+  const intervalRef = useRef();
+  const interactionContext = useContext(InteractionContext);
+  useLayoutEffect(() => {
+    if (interactionContext != null) {
+      return interactionContext.hold(interactionName);
+    }
+  }, [interactionContext, interactionName]);
+  useEffect(() => {
+    if (animationDisabled) {
+      setProgress(STATIC_PROGRESS_VALUE);
+      return;
+    }
+    intervalRef.current = setInterval(() => {
+      setProgress(prev => {
+        if (prev < 0.1) {
+          return prev + 0.1;
+        } else if (prev < 0.6) {
+          return prev + 0.35;
+        } else if (prev < 0.9) {
+          return prev + 0.1;
+        }
+        clearInterval(intervalRef.current);
+        return prev;
+      });
+    }, TICK_INTERVAL_MS);
+    return () => clearInterval(intervalRef.current);
+  }, [animationDisabled]);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-label": intl.formatMessage(messages.loadingBarLabel),
+    "data-testid": testId,
+    className: ax(["_1reo15vq _18m915vq _2rko1rr0 _kqswstnw _94n5u2gc _1bsb1lk2 _1ltv1ghs _4t3ii2wt _bfhki8nm"])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${clampToPercent(progress)}%`
+    },
+    className: ax(["_2rko1rr0 _v564aq9m _1e0c1ule _4t3i1osq _bfhk10ef"])
+  }));
+};

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

@@ -18,7 +18,7 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._4t3ine4n{height:var(--media-wrapper-height)}
 ._5sb1v00u [data-cursor=wait]{cursor:wait}
 ._9m3z1osq>div{width:100%}
-._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1osq{max-height:100%}
 ._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg541i5c:hover .media-card-blanket{background-color:var(--ds-blanket,#050c1f75)}

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

@@ -76,7 +76,7 @@ export const Wrapper = props => {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhki8nm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
     "data-testid": testId,
     style: {
       [LOCAL_WIDTH_VARIABLE]: width,

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: "80.7.4",
+      packageName: "80.7.5",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

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

@@ -1,23 +1,23 @@
 import React from 'react';
-import { Component } from 'react';
+import SpinnerIcon from '@atlaskit/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';
-import SpinnerIcon from '@atlaskit/spinner';
-export class CardLoading extends Component {
-  render() {
-    const {
-      dimensions: dimensionsProp,
-      testId,
-      interactionName
-    } = this.props;
-    const dimensions = getDimensionsWithDefault(dimensionsProp);
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      "data-testid": testId || 'media-card-loading',
-      "data-test-loading": true,
-      dimensions: dimensions,
-      "data-vc": "media-card-loading"
-    }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-      interactionName: interactionName || 'media-card-loading'
-    }));
-  }
-}
+export const CardLoading = ({
+  dimensions: dimensionsProp,
+  testId,
+  interactionName
+}) => {
+  const dimensions = getDimensionsWithDefault(dimensionsProp);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    "data-testid": testId || 'media-card-loading',
+    "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, {
+    interactionName: interactionName || 'media-card-loading'
+  }));
+};

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

@@ -6,7 +6,8 @@ export const wrapperStyles = ({
 }) => css(
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 center, {
-  background: "var(--ds-background-neutral, #0515240F)",
+  position: 'relative',
+  background: "var(--ds-surface-sunken, #F8F8F8)",
   color: "var(--ds-icon, #292A2E)"
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/es2019/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "80.7.4";
+const packageVersion = "80.7.5";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/ai-generating-overlay/AIGeneratingOverlay.compiled.css

@@ -1,6 +1,6 @@
 
 ._1r04idpf{inset:0}
-._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._y44v15mx{animation:var(--_1aqqhnb)}._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}

package/dist/esm/card/ai-generating-overlay/AIGeneratingOverlay.js

@@ -26,7 +26,7 @@ export function AIGeneratingOverlay(_ref) {
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     "data-testid": "ai-generating-overlay-progress-bar",
-    className: ax(["_2rkolb4i _1reo15vq _18m915vq _1bsb1lk2 _4t3ii2wt _kqswh2mm _bfhk15uy"])
+    className: ax(["_2rko1rr0 _1reo15vq _18m915vq _1bsb1lk2 _4t3ii2wt _kqswh2mm _bfhk15uy"])
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "ai-generating-overlay-train",
     className: ax(["_y44v15mx _1e0c1txw _kqswstnw _154iidpf _4t3i1osq"]),

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.7.4";
+var packageVersion = "80.7.5";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -15,6 +15,7 @@ import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { ImageRenderer } from './ui/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
+import { LoadingBar } from './ui/loadingBar/loadingBar';
 import { ProgressBar } from './ui/progressBar/progressBar';
 import { PlayButton } from './ui/playButton/playButton';
 import { TickBox } from './ui/tickBox/tickBox';
@@ -292,13 +293,17 @@ export var CardViewBase = function CardViewBase(_ref) {
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && /*#__PURE__*/React.createElement(IconWrapper, {
+  }), 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",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
+  }))), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,

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 = "80.7.4";
+var packageVersion = "80.7.5";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/loadingBar/loadingBar.compiled.css

@@ -0,0 +1,13 @@
+
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._v564aq9m{transition:width .8s}._18m915vq{overflow-y:hidden}
+._1bsb1lk2{width:95%}
+._1e0c1ule{display:block}
+._1ltv1ghs{left:2.5%}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._4t3ii2wt{height:6px}
+._94n5u2gc{bottom:var(--ds-space-100,8px)}
+._bfhk10ef{background-color:var(--ds-background-accent-gray-subtler-hovered,#b7b9be)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,82 @@
+/* loadingBar.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./loadingBar.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useContext, useEffect, useLayoutEffect as useRealLayoutEffect, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import InteractionContext from '@atlaskit/interaction-context';
+var TICK_INTERVAL_MS = 1000;
+var STATIC_PROGRESS_VALUE = 0.9;
+
+/**
+ * `useLayoutEffect` is being used in SSR safe form. On the server, this work doesn’t need to run.
+ * `useEffect` is used in-place, because `useEffect` is not run on the server and it matches types
+ * which makes things simpler than doing an `isServer` check or a `null` check.
+ *
+ * @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;
+var messages = defineMessages({
+  loadingBarLabel: {
+    id: 'fabric.media.loading_bar_label',
+    defaultMessage: 'Loading',
+    description: 'Aria label for the loading bar shown while a media card is loading'
+  }
+});
+var trackStyles = null;
+var fillStyles = null;
+var clampToPercent = function clampToPercent(progress) {
+  return Math.min(1, Math.max(0, progress)) * 100;
+};
+export var LoadingBar = function LoadingBar(_ref) {
+  var _ref$animationDisable = _ref.animationDisabled,
+    animationDisabled = _ref$animationDisable === void 0 ? false : _ref$animationDisable,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName;
+  var intl = useIntl();
+  var _useState = useState(animationDisabled ? STATIC_PROGRESS_VALUE : 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    progress = _useState2[0],
+    setProgress = _useState2[1];
+  var intervalRef = useRef();
+  var interactionContext = useContext(InteractionContext);
+  useLayoutEffect(function () {
+    if (interactionContext != null) {
+      return interactionContext.hold(interactionName);
+    }
+  }, [interactionContext, interactionName]);
+  useEffect(function () {
+    if (animationDisabled) {
+      setProgress(STATIC_PROGRESS_VALUE);
+      return;
+    }
+    intervalRef.current = setInterval(function () {
+      setProgress(function (prev) {
+        if (prev < 0.1) {
+          return prev + 0.1;
+        } else if (prev < 0.6) {
+          return prev + 0.35;
+        } else if (prev < 0.9) {
+          return prev + 0.1;
+        }
+        clearInterval(intervalRef.current);
+        return prev;
+      });
+    }, TICK_INTERVAL_MS);
+    return function () {
+      return clearInterval(intervalRef.current);
+    };
+  }, [animationDisabled]);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-label": intl.formatMessage(messages.loadingBarLabel),
+    "data-testid": testId,
+    className: ax(["_1reo15vq _18m915vq _2rko1rr0 _kqswstnw _94n5u2gc _1bsb1lk2 _1ltv1ghs _4t3ii2wt _bfhki8nm"])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(clampToPercent(progress), "%")
+    },
+    className: ax(["_2rko1rr0 _v564aq9m _1e0c1ule _4t3i1osq _bfhk10ef"])
+  }));
+};

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

@@ -18,7 +18,7 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._4t3ine4n{height:var(--media-wrapper-height)}
 ._5sb1v00u [data-cursor=wait]{cursor:wait}
 ._9m3z1osq>div{width:100%}
-._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1osq{max-height:100%}
 ._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg541i5c:hover .media-card-blanket{background-color:var(--ds-blanket,#050c1f75)}

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

@@ -71,7 +71,7 @@ export var Wrapper = function Wrapper(props) {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhki8nm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
     "data-testid": testId,
     style: _objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
     ref: innerRef,

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: "80.7.4",
+        packageName: "80.7.5",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

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

@@ -1,37 +1,22 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { Component } from 'react';
+import SpinnerIcon from '@atlaskit/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';
-import SpinnerIcon from '@atlaskit/spinner';
-export var CardLoading = /*#__PURE__*/function (_Component) {
-  function CardLoading() {
-    _classCallCheck(this, CardLoading);
-    return _callSuper(this, CardLoading, arguments);
-  }
-  _inherits(CardLoading, _Component);
-  return _createClass(CardLoading, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        dimensionsProp = _this$props.dimensions,
-        testId = _this$props.testId,
-        interactionName = _this$props.interactionName;
-      var dimensions = getDimensionsWithDefault(dimensionsProp);
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        "data-testid": testId || 'media-card-loading',
-        "data-test-loading": true,
-        dimensions: dimensions,
-        "data-vc": "media-card-loading"
-      }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-        interactionName: interactionName || 'media-card-loading'
-      }));
-    }
-  }]);
-}(Component);
+export var CardLoading = function CardLoading(_ref) {
+  var dimensionsProp = _ref.dimensions,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName;
+  var dimensions = getDimensionsWithDefault(dimensionsProp);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    "data-testid": testId || 'media-card-loading',
+    "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, {
+    interactionName: interactionName || 'media-card-loading'
+  }));
+};

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

@@ -6,7 +6,8 @@ export var wrapperStyles = function wrapperStyles(_ref) {
   return css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   center, {
-    background: "var(--ds-background-neutral, #0515240F)",
+    position: 'relative',
+    background: "var(--ds-surface-sunken, #F8F8F8)",
     color: "var(--ds-icon, #292A2E)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.7.4";
+var packageVersion = "80.7.5";
 var SAMPLE_RATE = 0.05;
 
 /**

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

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export type LoadingBarProps = {
+    animationDisabled?: boolean;
+    testId?: string;
+    interactionName?: string;
+};
+export declare const LoadingBar: ({ animationDisabled, testId, interactionName, }: LoadingBarProps) => React.JSX.Element;

package/dist/types/utils/lightCards/cardLoading.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-import { Component } from 'react';
 import { type StaticCardProps } from './types';
-export declare class CardLoading extends Component<StaticCardProps, {}> {
-    render(): React.JSX.Element;
-}
+export declare const CardLoading: ({ dimensions: dimensionsProp, testId, interactionName, }: StaticCardProps) => React.JSX.Element;

package/dist/types-ts4.5/card/ui/loadingBar/loadingBar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export type LoadingBarProps = {
+    animationDisabled?: boolean;
+    testId?: string;
+    interactionName?: string;
+};
+export declare const LoadingBar: ({ animationDisabled, testId, interactionName, }: LoadingBarProps) => React.JSX.Element;

package/dist/types-ts4.5/utils/lightCards/cardLoading.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-import { Component } from 'react';
 import { type StaticCardProps } from './types';
-export declare class CardLoading extends Component<StaticCardProps, {}> {
-    render(): React.JSX.Element;
-}
+export declare const CardLoading: ({ dimensions: dimensionsProp, testId, interactionName, }: StaticCardProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "80.7.5",
+	"version": "80.8.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,6 +42,7 @@
 		"@atlaskit/dropdown-menu": "^16.10.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/icon": "^35.4.0",
+		"@atlaskit/interaction-context": "^3.1.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-client-react": "^5.2.0",
@@ -54,11 +55,11 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/progress-bar": "^4.2.0",
-		"@atlaskit/react-ufo": "^6.6.0",
+		"@atlaskit/react-ufo": "^6.7.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
-		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tmp-editor-statsig": "^89.2.0",
+		"@atlaskit/tokens": "^13.2.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/ufo": "^0.5.0",
 		"@atlaskit/visually-hidden": "^3.1.0",