@atlaskit/smart-card 40.13.3 → 40.14.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/smart-card
 
+## 40.14.1
+
+### Patch Changes
+
+- [`9611ba1c6ba80`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9611ba1c6ba80) -
+  NO-ISSUE cleaning up smart-links-noun-support leftover references
+- [`ef3b2dfa2f8a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef3b2dfa2f8a8) -
+  Internal changes to use radius tokens. No visual changes.
+- Updated dependencies
+
+## 40.14.0
+
+### Minor Changes
+
+- [`5763f85b421a2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5763f85b421a2) - -
+  The new method `getCacheStatusForNode` is added to `NodeDataProvider` class to get the cache
+  status for a given node.
+  - The `CardSSR` component will start supporting `hideIconLoadingSkeleton` property for any type of
+    smart card.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 40.13.3
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.13.2"
+  packageVersion: "40.14.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -15,6 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _constants = require("../../../constants");
 var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
 var _blocks = require("../../FlexibleCard/components/blocks");
@@ -75,6 +76,9 @@ var ResolvedView = function ResolvedView(_ref) {
   if ((0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
     uiOptions.enableSnippetRenderer = true;
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+    uiOptions.hideLoadingSkeleton = hideIconLoadingSkeleton;
+  }
   return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,

package/dist/cjs/view/CardWithUrl/component.js

@@ -285,7 +285,8 @@ function Component(_ref) {
         actionOptions: actionOptions,
         removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
         resolvingPlaceholder: resolvingPlaceholder,
-        truncateInline: truncateInline
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {

package/dist/cjs/view/EmbedCard/components/ImageIcon.compiled.css

@@ -1 +1 @@
-._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}

package/dist/cjs/view/EmbedCard/components/ImageIcon.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _styled = require("./styled");
 var styles = {
-  roundedImage: "_2rko14q2"
+  roundedImage: "_2rko1twn"
 };
 var ImageIcon = exports.ImageIcon = function ImageIcon(_ref) {
   var _ref$alt = _ref.alt,

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -65,7 +65,10 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
       }
     }
   }, [ignoreContainerPadding, placement, style]);
-  (0, _react.useEffect)(function () {
+
+  // Should be useLayoutEffect to avoid flicker.
+  // Styles should be set before paint.
+  (0, _react.useLayoutEffect)(function () {
     updateStyles();
   }, [ignoreContainerPadding, placement, updateStyles, className]);
   var handleOnLoad = (0, _react.useCallback)(function () {

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.compiled.css

@@ -1 +1 @@
-._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -16,7 +16,7 @@ var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _loadingSkeleton = require("../loading-skeleton");
 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 styles = {
-  roundImg: "_2rko14q2"
+  roundImg: "_2rko1twn"
 };
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12vemgnk{background-repeat:no-repeat}
 ._1e0c1o8l{display:inline-block}
 ._1itkx3i8{background-image:var(--_16116mi)}
 ._1lrw6rms{background-size:280% 100%}

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -18,7 +18,7 @@ var LoadingSkeleton = exports.LoadingSkeleton = function LoadingSkeleton(_ref) {
     height = _ref.height;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_2rkoyh40 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
+    className: (0, _runtime.ax)(["_2rkolb4i _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
     style: {
       width: width,
       height: height,

package/dist/cjs/view/FlexibleCard/components/elements/common/base-badge-element/index.js

@@ -12,8 +12,10 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _constants = require("../../../../../../constants");
 var _messages = require("../../../../../../messages");
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _atlaskitIcon = _interopRequireDefault(require("../../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../../common/image-icon"));
 var _withOverrideCss = require("../../../common/with-override-css");
@@ -50,11 +52,12 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
     });
   }
 };
-var renderImageIcon = function renderImageIcon(url, testId) {
+var renderImageIcon = function renderImageIcon(url, testId, hideLoadingSkeleton) {
   if (url) {
     return /*#__PURE__*/_react.default.createElement(_imageIcon.default, {
       testId: testId,
-      url: url
+      url: url,
+      hideLoadingSkeleton: (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton
     });
   }
 };
@@ -83,8 +86,11 @@ var BaseBadgeRefreshNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
     url = _ref.url,
     color = _ref.color;
+  var ui = (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleUiOptionContext)() : undefined;
   var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
-  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId, ui === null || ui === void 0 ? void 0 : ui.hideLoadingSkeleton);
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }

package/dist/cjs/view/FlexibleCard/components/elements/media-element/index.js

@@ -10,6 +10,8 @@ exports.default = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 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); }
 /**
@@ -37,6 +39,9 @@ var MediaElement = function MediaElement(_ref) {
     url = _ref.url,
     onLoad = _ref.onLoad,
     onError = _ref.onError;
+  var ui = (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleUiOptionContext)() : undefined;
   if (!type || !url) {
     return null;
   }
@@ -48,6 +53,7 @@ var MediaElement = function MediaElement(_ref) {
     ,
     className: (0, _runtime.ax)(["_1h1tcq2i _1e0c1txw _1bsb1osq _4t3i1ns9 _jqez1osq _1lg71osq _6slq1osq _x1m21osq _1chb1osq _1usb1osq _5c331osq _l9z01osq _6o691dfr _vr2g1dfr _173baqso _1niwaqso _t0h9stnw _1ulbstnw _byj21ooe _3hvr1ooe _1c0s1ssb _15j31ssb _1npy1ssb _19he1ssb _n3vc1wug _1qj91wug _4fdy1wug _18cv1wug _1aoq15vq _1iqz15vq _6fioj63w _l0jmidpf _12zuh2mm", className])
   }, /*#__PURE__*/React.createElement(_imageIcon.default, {
+    hideLoadingSkeleton: ui === null || ui === void 0 ? void 0 : ui.hideLoadingSkeleton,
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,

package/dist/cjs/view/InlineCard/Icon.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._154i1ssb{top:50%}
 ._1bsb7vkz{width:1pc}
 ._1ltv1ssb{left:50%}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}

package/dist/cjs/view/InlineCard/Icon.js

@@ -29,7 +29,7 @@ var Icon = exports.Icon = (0, _react.forwardRef)(function (_ref, __cmplr) {
   return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
-    className: (0, _runtime.ax)(["_2rkoyh40 _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
+    className: (0, _runtime.ax)(["_2rkolb4i _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,7 +1,7 @@
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._2rkoyh40{border-radius:2px}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._154i1ssb{top:50%}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.js

@@ -10,6 +10,7 @@ exports.IconTitleWrapper = exports.IconAndTitleLayout = void 0;
 require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactMagneticDi = require("react-magnetic-di");
@@ -17,6 +18,7 @@ var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils = require("../../../utils");
 var _Icon = require("../Icon");
 var _excluded = ["as", "style"];
@@ -29,7 +31,7 @@ var styles = {
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
   linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66",
-  roundImageStyle: "_2rko14q2"
+  roundImageStyle: "_2rko1twn"
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/design-system/no-html-anchor -- Ignored via go/DSP-18766
 var LinkAppearance = (0, _react.forwardRef)(function (_ref, __cmplr) {
@@ -59,7 +61,12 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
     rightSide = _ref2.rightSide,
     _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? 'inline-card-icon-and-title' : _ref2$testId,
-    type = _ref2.type;
+    type = _ref2.type,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
   var renderAtlaskitIcon = _react.default.useCallback(function () {
     if (emoji) {
       return emoji;
@@ -74,6 +81,20 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
     if (!icon || typeof icon !== 'string') {
       return null;
     }
+    if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton) {
+      if (hasImageErrored) {
+        return errored;
+      }
+      return /*#__PURE__*/_react.default.createElement("img", {
+        src: icon,
+        "data-testid": "".concat(testId, "-image"),
+        alt: "",
+        onError: function onError() {
+          return setHasImageErrored(true);
+        },
+        className: (0, _runtime.ax)(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
+      });
+    }
     return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
       src: icon,
       loaded: /*#__PURE__*/_react.default.createElement("img", {
@@ -87,7 +108,7 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
         testId: "".concat(testId, "-loading")
       })
     });
-  }, [icon, profileType]);
+  }, [icon, profileType, hideIconLoadingSkeleton, hasImageErrored]);
   var renderIconPlaceholder = _react.default.useCallback(function (testId) {
     return defaultIcon || /*#__PURE__*/_react.default.createElement(_link.default, {
       label: "link",
@@ -141,7 +162,7 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
     testId: "icon-empty-wrapper"
   }), /*#__PURE__*/_react.default.createElement("span", {
     "data-testId": "icon-wrapper",
-    className: (0, _runtime.ax)(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+    className: (0, _runtime.ax)(["_11c81o8v _2rkolb4i _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
   }, renderIcon(testId)))), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     style: {

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -12,6 +12,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _HoverCard = require("../../HoverCard");
 var _inlineLozenge = _interopRequireDefault(require("../common/inline-lozenge"));
 var _Frame = require("../Frame");
@@ -64,7 +65,8 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         hoverPreviewOptions = _this$props.hoverPreviewOptions,
         actionOptions = _this$props.actionOptions,
         truncateInline = _this$props.truncateInline,
-        type = _this$props.type;
+        type = _this$props.type,
+        hideIconLoadingSkeleton = _this$props.hideIconLoadingSkeleton;
       var inlineCardResolvedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         link: link,
@@ -77,7 +79,8 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         icon: icon,
         title: title,
         titleTextColor: titleTextColor,
-        type: type
+        type: type,
+        hideIconLoadingSkeleton: (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton
       }), this.renderLozenge());
       if (showHoverPreview && link) {
         return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {

package/dist/cjs/view/InlineCard/index.js

@@ -42,6 +42,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _loadHold = _interopRequireDefault(require("@atlaskit/react-ufo/load-hold"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _constants = require("../../constants");
 var _extractAccessContext = require("../../extractors/common/context/extractAccessContext");
 var _inline = require("../../extractors/inline");
@@ -82,7 +83,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref2) {
     actionOptions = _ref2.actionOptions,
     removeTextHighlightingFromTitle = _ref2.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref2.resolvingPlaceholder,
-    truncateInline = _ref2.truncateInline;
+    truncateInline = _ref2.truncateInline,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -135,7 +137,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref2) {
         isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus,
-        truncateInline: truncateInline
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton
       }));
     case 'unauthorized':
       var provider = (0, _linkExtractors.extractSmartLinkProvider)(details);

package/dist/cjs/view/LinkUrl/index.js

@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.13.2",
+  packageVersion: "40.14.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.13.2"
+  packageVersion: "40.14.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ActionName, ElementName, SmartLinkPosition } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
@@ -59,6 +60,9 @@ const ResolvedView = ({
   if (fg('cc-ai-linking-platform-snippet-renderer')) {
     uiOptions.enableSnippetRenderer = true;
   }
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+    uiOptions.hideLoadingSkeleton = hideIconLoadingSkeleton;
+  }
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,

package/dist/es2019/view/CardWithUrl/component.js

@@ -274,7 +274,8 @@ function Component({
         actionOptions: actionOptions,
         removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
         resolvingPlaceholder: resolvingPlaceholder,
-        truncateInline: truncateInline
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {

package/dist/es2019/view/EmbedCard/components/ImageIcon.compiled.css

@@ -1 +1 @@
-._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}

package/dist/es2019/view/EmbedCard/components/ImageIcon.js

@@ -5,7 +5,7 @@ import React from 'react';
 import ImageLoader from 'react-render-image';
 import { Image } from './styled';
 const styles = {
-  roundedImage: "_2rko14q2"
+  roundedImage: "_2rko1twn"
 };
 export const ImageIcon = ({
   alt = '',

package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 import { MediaPlacement } from '../../../../../../constants';
 import { Preview } from '../../../elements';
 import Block from '../../block';
@@ -52,7 +52,10 @@ const PreviewBlockResolvedView = ({
       }
     }
   }, [ignoreContainerPadding, placement, style]);
-  useEffect(() => {
+
+  // Should be useLayoutEffect to avoid flicker.
+  // Styles should be set before paint.
+  useLayoutEffect(() => {
     updateStyles();
   }, [ignoreContainerPadding, placement, updateStyles, className]);
   const handleOnLoad = useCallback(() => {

package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.compiled.css

@@ -1 +1 @@
-._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}

package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import ImageLoader from 'react-render-image';
 import { LoadingSkeleton } from '../loading-skeleton';
 const styles = {
-  roundImg: "_2rko14q2"
+  roundImg: "_2rko1twn"
 };
 const ImageIcon = ({
   defaultIcon,

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12vemgnk{background-repeat:no-repeat}
 ._1e0c1o8l{display:inline-block}
 ._1itkvl7m{background-image:linear-gradient(to right,transparent 0,var(--ds-skeleton,#edeef1) 20%,transparent 40%,transparent 100%)}
 ._1lrw6rms{background-size:280% 100%}

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -15,6 +15,6 @@ export const LoadingSkeleton = ({
       width,
       height
     },
-    className: ax(["_2rkoyh40 _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"])
+    className: ax(["_2rkolb4i _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"])
   });
 };

package/dist/es2019/view/FlexibleCard/components/elements/common/base-badge-element/index.js

@@ -4,8 +4,10 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { IconType } from '../../../../../../constants';
 import { messages } from '../../../../../../messages';
+import { useFlexibleUiOptionContext } from '../../../../../../state/flexible-ui-context';
 import AtlaskitIcon from '../../../common/atlaskit-icon';
 import ImageIcon from '../../../common/image-icon';
 import { withOverrideCss } from '../../../common/with-override-css';
@@ -51,11 +53,12 @@ const renderAtlaskitIcon = (icon, testId) => {
     });
   }
 };
-const renderImageIcon = (url, testId) => {
+const renderImageIcon = (url, testId, hideLoadingSkeleton) => {
   if (url) {
     return /*#__PURE__*/React.createElement(ImageIcon, {
       testId: testId,
-      url: url
+      url: url,
+      hideLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton
     });
   }
 };
@@ -82,8 +85,11 @@ const BaseBadgeRefreshNew = /*#__PURE__*/forwardRef(({
   url,
   color
 }, ref) => {
+  const ui = expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiOptionContext() : undefined;
   const formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
-  const badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+  const badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId, ui === null || ui === void 0 ? void 0 : ui.hideLoadingSkeleton);
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }

package/dist/es2019/view/FlexibleCard/components/elements/media-element/index.js

@@ -2,6 +2,8 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ImageIcon from '../../common/image-icon';
 /**
  * Media: Image
@@ -28,6 +30,9 @@ const MediaElement = ({
   onLoad,
   onError
 }) => {
+  const ui = expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiOptionContext() : undefined;
   if (!type || !url) {
     return null;
   }
@@ -39,6 +44,7 @@ const MediaElement = ({
     ,
     className: ax(["_1h1tcq2i _1e0c1txw _1bsb1osq _4t3i1ns9 _jqez1osq _1lg71osq _6slq1osq _x1m21osq _1chb1osq _1usb1osq _5c331osq _l9z01osq _6o691dfr _vr2g1dfr _173baqso _1niwaqso _t0h9stnw _1ulbstnw _byj21ooe _3hvr1ooe _1c0s1ssb _15j31ssb _1npy1ssb _19he1ssb _n3vc1wug _1qj91wug _4fdy1wug _18cv1wug _1aoq15vq _1iqz15vq _6fioj63w _l0jmidpf _12zuh2mm", className])
   }, /*#__PURE__*/React.createElement(ImageIcon, {
+    hideLoadingSkeleton: ui === null || ui === void 0 ? void 0 : ui.hideLoadingSkeleton,
     testId: `${testId}-image`,
     url: url,
     onError: onError,

package/dist/es2019/view/InlineCard/Icon.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._154i1ssb{top:50%}
 ._1bsb7vkz{width:1pc}
 ._1ltv1ssb{left:50%}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}

package/dist/es2019/view/InlineCard/Icon.js

@@ -19,7 +19,7 @@ export const Icon = forwardRef(({
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
-    className: ax(["_2rkoyh40 _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
+    className: ax(["_2rkolb4i _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,7 +1,7 @@
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._2rkoyh40{border-radius:2px}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._154i1ssb{top:50%}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}