@atlaskit/smart-card 40.13.2 → 40.14.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/smart-card
 
+## 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
+
+- Updated dependencies
+
 ## 40.13.2
 
 ### 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.1"
+  packageVersion: "0.0.0-development"
 };
 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/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/IconAndTitleLayout/index.compiled.css

@@ -1,5 +1,5 @@
 ._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}
 ._154i1ssb{top:50%}

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",

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.1",
+  packageVersion: "0.0.0-development",
   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.1"
+  packageVersion: "0.0.0-development"
 };
 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/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/IconAndTitleLayout/index.compiled.css

@@ -1,5 +1,5 @@
 ._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}
 ._154i1ssb{top:50%}

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

@@ -3,12 +3,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { forwardRef } from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import { di } from 'react-magnetic-di';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { Box } from '@atlaskit/primitives/compiled';
 import { B400 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isProfileType } from '../../../utils';
 import { Shimmer } from '../Icon';
 const iconWrapperStyle = null;
@@ -19,7 +20,7 @@ const 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
 const LinkAppearance = forwardRef(({
@@ -48,8 +49,10 @@ export const IconAndTitleLayout = ({
   link,
   rightSide,
   testId = 'inline-card-icon-and-title',
-  type
+  type,
+  hideIconLoadingSkeleton
 }) => {
+  const [hasImageErrored, setHasImageErrored] = useState(false);
   const renderAtlaskitIcon = React.useCallback(() => {
     if (emoji) {
       return emoji;
@@ -64,6 +67,18 @@ export const IconAndTitleLayout = ({
     if (!icon || typeof icon !== 'string') {
       return null;
     }
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton) {
+      if (hasImageErrored) {
+        return errored;
+      }
+      return /*#__PURE__*/React.createElement("img", {
+        src: icon,
+        "data-testid": `${testId}-image`,
+        alt: "",
+        onError: () => setHasImageErrored(true),
+        className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
+      });
+    }
     return /*#__PURE__*/React.createElement(ImageLoader, {
       src: icon,
       loaded: /*#__PURE__*/React.createElement("img", {
@@ -77,7 +92,7 @@ export const IconAndTitleLayout = ({
         testId: `${testId}-loading`
       })
     });
-  }, [icon, profileType]);
+  }, [icon, profileType, hideIconLoadingSkeleton, hasImageErrored]);
   const renderIconPlaceholder = React.useCallback(testId => {
     return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
       label: "link",

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { HoverCard } from '../../HoverCard';
 import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
@@ -40,7 +41,8 @@ export class InlineCardResolvedView extends React.Component {
       hoverPreviewOptions,
       actionOptions,
       truncateInline,
-      type
+      type,
+      hideIconLoadingSkeleton
     } = this.props;
     const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
@@ -54,7 +56,8 @@ export class InlineCardResolvedView extends React.Component {
       icon: icon,
       title: title,
       titleTextColor: titleTextColor,
-      type: type
+      type: type,
+      hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton
     }), this.renderLozenge());
     if (showHoverPreview && link) {
       return /*#__PURE__*/React.createElement(HoverCard, {

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

@@ -6,6 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // TODO: Package Owner - please fix:
 // eslint-disable-next-line import/no-extraneous-dependencies
 import UFOHoldLoad from '@atlaskit/react-ufo/load-hold';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SmartLinkStatus } from '../../constants';
 import { extractRequestAccessContextImproved } from '../../extractors/common/context/extractAccessContext';
 import { extractInlineProps } from '../../extractors/inline';
@@ -43,7 +44,8 @@ export const InlineCard = ({
   actionOptions,
   removeTextHighlightingFromTitle,
   resolvingPlaceholder,
-  truncateInline
+  truncateInline,
+  hideIconLoadingSkeleton
 }) => {
   var _details$meta, _providerForbidden$te;
   const {
@@ -101,7 +103,8 @@ export const InlineCard = ({
         isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus,
-        truncateInline: truncateInline
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton
       }));
     case 'unauthorized':
       const provider = extractSmartLinkProvider(details);

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

@@ -9,7 +9,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.13.1",
+  packageVersion: "0.0.0-development",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.13.1"
+  packageVersion: "0.0.0-development"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -7,6 +7,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';
@@ -66,6 +67,9 @@ var ResolvedView = function ResolvedView(_ref) {
   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/esm/view/CardWithUrl/component.js

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

package/dist/esm/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/esm/view/EmbedCard/components/ImageIcon.js

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

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

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 import { MediaPlacement } from '../../../../../../constants';
 import { Preview } from '../../../elements';
 import Block from '../../block';
@@ -56,7 +56,10 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
       }
     }
   }, [ignoreContainerPadding, placement, style]);
-  useEffect(function () {
+
+  // Should be useLayoutEffect to avoid flicker.
+  // Styles should be set before paint.
+  useLayoutEffect(function () {
     updateStyles();
   }, [ignoreContainerPadding, placement, updateStyles, className]);
   var handleOnLoad = useCallback(function () {

package/dist/esm/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/esm/view/FlexibleCard/components/common/image-icon/index.js

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

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

@@ -7,8 +7,10 @@ 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';
@@ -42,11 +44,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.createElement(ImageIcon, {
       testId: testId,
-      url: url
+      url: url,
+      hideLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton
     });
   }
 };
@@ -75,8 +78,11 @@ var BaseBadgeRefreshNew = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
     url = _ref.url,
     color = _ref.color;
+  var ui = expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  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/esm/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 @@ var MediaElement = function MediaElement(_ref) {
     url = _ref.url,
     onLoad = _ref.onLoad,
     onError = _ref.onError;
+  var 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 @@ var MediaElement = function MediaElement(_ref) {
     ,
     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: "".concat(testId, "-image"),
     url: url,
     onError: onError,

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

@@ -1,5 +1,5 @@
 ._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}
 ._154i1ssb{top:50%}

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

@@ -1,16 +1,18 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["as", "style"];
 import "./index.compiled.css";
 import { forwardRef } from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import { di } from 'react-magnetic-di';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { Box } from '@atlaskit/primitives/compiled';
 import { B400 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isProfileType } from '../../../utils';
 import { Shimmer } from '../Icon';
 var iconWrapperStyle = null;
@@ -21,7 +23,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 = forwardRef(function (_ref, __cmplr) {
@@ -51,7 +53,12 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref2) {
     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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
   var renderAtlaskitIcon = React.useCallback(function () {
     if (emoji) {
       return emoji;
@@ -66,6 +73,20 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref2) {
     if (!icon || typeof icon !== 'string') {
       return null;
     }
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton) {
+      if (hasImageErrored) {
+        return errored;
+      }
+      return /*#__PURE__*/React.createElement("img", {
+        src: icon,
+        "data-testid": "".concat(testId, "-image"),
+        alt: "",
+        onError: function onError() {
+          return setHasImageErrored(true);
+        },
+        className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
+      });
+    }
     return /*#__PURE__*/React.createElement(ImageLoader, {
       src: icon,
       loaded: /*#__PURE__*/React.createElement("img", {
@@ -79,7 +100,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref2) {
         testId: "".concat(testId, "-loading")
       })
     });
-  }, [icon, profileType]);
+  }, [icon, profileType, hideIconLoadingSkeleton, hasImageErrored]);
   var renderIconPlaceholder = React.useCallback(function (testId) {
     return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
       label: "link",

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

@@ -7,6 +7,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 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 { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { HoverCard } from '../../HoverCard';
 import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
@@ -57,7 +58,8 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         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.createElement(Frame, {
         testId: testId,
         link: link,
@@ -70,7 +72,8 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         icon: icon,
         title: title,
         titleTextColor: titleTextColor,
-        type: type
+        type: type,
+        hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton
       }), this.renderLozenge());
       if (showHoverPreview && link) {
         return /*#__PURE__*/React.createElement(HoverCard, {

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

@@ -6,6 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // TODO: Package Owner - please fix:
 // eslint-disable-next-line import/no-extraneous-dependencies
 import UFOHoldLoad from '@atlaskit/react-ufo/load-hold';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SmartLinkStatus } from '../../constants';
 import { extractRequestAccessContextImproved } from '../../extractors/common/context/extractAccessContext';
 import { extractInlineProps } from '../../extractors/inline';
@@ -43,7 +44,8 @@ export var InlineCard = function InlineCard(_ref2) {
     actionOptions = _ref2.actionOptions,
     removeTextHighlightingFromTitle = _ref2.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref2.resolvingPlaceholder,
-    truncateInline = _ref2.truncateInline;
+    truncateInline = _ref2.truncateInline,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -96,7 +98,8 @@ export var InlineCard = function InlineCard(_ref2) {
         isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus,
-        truncateInline: truncateInline
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideIconLoadingSkeleton
       }));
     case 'unauthorized':
       var provider = extractSmartLinkProvider(details);

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.13.1",
+  packageVersion: "0.0.0-development",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/view/FlexibleCard/components/elements/common/base-badge-element/index.d.ts

@@ -19,6 +19,11 @@ export type BaseBadgeElementProps = ElementProps & {
      * the badge will be displayed without the icon, showing only the label text.
      */
     hideIcon?: boolean;
+    /**
+     * When set to true, the loading skeleton for the image icon will be hidden,
+     * the image will be rendered directly.
+     */
+    hideIconLoadingSkeleton?: boolean;
     /**
      * The Atlaskit Icon to display next to the label. If this is not supplied,
      * then the badge icon will fallback to the URL provided.
@@ -47,6 +52,11 @@ declare const _default: (props: ElementProps & {
      * the badge will be displayed without the icon, showing only the label text.
      */
     hideIcon?: boolean;
+    /**
+     * When set to true, the loading skeleton for the image icon will be hidden,
+     * the image will be rendered directly.
+     */
+    hideIconLoadingSkeleton?: boolean;
     /**
      * The Atlaskit Icon to display next to the label. If this is not supplied,
      * then the badge icon will fallback to the URL provided.

package/dist/types/view/FlexibleCard/types.d.ts

@@ -100,6 +100,10 @@ export type FlexibleCardProps = {
 };
 export type InternalFlexibleUiOptions = FlexibleUiOptions & {
     hideLegacyButton?: boolean;
+    /**
+     * For images, whether to hide the loading skeleton while the image is loading.
+     */
+    hideLoadingSkeleton?: boolean;
 };
 export type FlexibleUiOptions = {
     /**

package/dist/types/view/InlineCard/IconAndTitleLayout/index.d.ts

@@ -9,6 +9,7 @@ export interface IconAndTitleLayoutProps {
     children?: React.ReactNode;
     defaultIcon?: React.ReactNode;
     emoji?: React.ReactNode;
+    hideIconLoadingSkeleton?: boolean;
     icon?: React.ReactNode;
     link?: string;
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
@@ -21,5 +22,5 @@ export interface IconAndTitleLayoutProps {
     titleTextColor?: string;
     type?: string[];
 }
-export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, type, }: IconAndTitleLayoutProps) => JSX.Element;
+export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, type, hideIconLoadingSkeleton, }: IconAndTitleLayoutProps) => JSX.Element;
 export declare const IconTitleWrapper: (props: ComponentPropsWithoutRef<typeof Box>) => JSX.Element;

package/dist/types/view/InlineCard/ResolvedView/index.d.ts

@@ -5,6 +5,11 @@ import { type HoverPreviewOptions } from '../../HoverCard/types';
 export interface InlineCardResolvedViewProps {
     /** Configure visibility of server and client actions */
     actionOptions?: CardActionOptions;
+    /**
+     * When set to true, the loading skeleton for the image icon will be hidden,
+     * the image will be rendered directly.
+     */
+    hideIconLoadingSkeleton?: boolean;
     hoverPreviewOptions?: HoverPreviewOptions;
     /** The optional con of the service (e.g. Dropbox/Asana/Google/etc) to display */
     icon?: React.ReactNode;

package/dist/types/view/InlineCard/index.d.ts

@@ -6,4 +6,4 @@ import { InlineCardResolvingView } from './ResolvingView';
 import { type InlineCardProps } from './types';
 import { InlineCardUnauthorizedView } from './UnauthorisedView';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView, };
-export declare const InlineCard: ({ id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, actionOptions, removeTextHighlightingFromTitle, resolvingPlaceholder, truncateInline, }: InlineCardProps) => React.JSX.Element;
+export declare const InlineCard: ({ id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, actionOptions, removeTextHighlightingFromTitle, resolvingPlaceholder, truncateInline, hideIconLoadingSkeleton, }: InlineCardProps) => React.JSX.Element;

package/dist/types/view/InlineCard/types.d.ts

@@ -9,6 +9,7 @@ export type InlineCardProps = {
     cardState: CardState;
     handleAuthorize: (() => void) | undefined;
     handleFrameClick: EventHandler<MouseEvent | KeyboardEvent>;
+    hideIconLoadingSkeleton?: boolean;
     hoverPreviewOptions?: HoverPreviewOptions;
     id: string;
     inlinePreloaderStyle?: InlinePreloaderStyle;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-badge-element/index.d.ts

@@ -19,6 +19,11 @@ export type BaseBadgeElementProps = ElementProps & {
      * the badge will be displayed without the icon, showing only the label text.
      */
     hideIcon?: boolean;
+    /**
+     * When set to true, the loading skeleton for the image icon will be hidden,
+     * the image will be rendered directly.
+     */
+    hideIconLoadingSkeleton?: boolean;
     /**
      * The Atlaskit Icon to display next to the label. If this is not supplied,
      * then the badge icon will fallback to the URL provided.
@@ -47,6 +52,11 @@ declare const _default: (props: ElementProps & {
      * the badge will be displayed without the icon, showing only the label text.
      */
     hideIcon?: boolean;
+    /**
+     * When set to true, the loading skeleton for the image icon will be hidden,
+     * the image will be rendered directly.
+     */
+    hideIconLoadingSkeleton?: boolean;
     /**
      * The Atlaskit Icon to display next to the label. If this is not supplied,
      * then the badge icon will fallback to the URL provided.

package/dist/types-ts4.5/view/FlexibleCard/types.d.ts

@@ -100,6 +100,10 @@ export type FlexibleCardProps = {
 };
 export type InternalFlexibleUiOptions = FlexibleUiOptions & {
     hideLegacyButton?: boolean;
+    /**
+     * For images, whether to hide the loading skeleton while the image is loading.
+     */
+    hideLoadingSkeleton?: boolean;
 };
 export type FlexibleUiOptions = {
     /**

package/dist/types-ts4.5/view/InlineCard/IconAndTitleLayout/index.d.ts

@@ -9,6 +9,7 @@ export interface IconAndTitleLayoutProps {
     children?: React.ReactNode;
     defaultIcon?: React.ReactNode;
     emoji?: React.ReactNode;
+    hideIconLoadingSkeleton?: boolean;
     icon?: React.ReactNode;
     link?: string;
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
@@ -21,5 +22,5 @@ export interface IconAndTitleLayoutProps {
     titleTextColor?: string;
     type?: string[];
 }
-export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, type, }: IconAndTitleLayoutProps) => JSX.Element;
+export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, type, hideIconLoadingSkeleton, }: IconAndTitleLayoutProps) => JSX.Element;
 export declare const IconTitleWrapper: (props: ComponentPropsWithoutRef<typeof Box>) => JSX.Element;

package/dist/types-ts4.5/view/InlineCard/ResolvedView/index.d.ts

@@ -5,6 +5,11 @@ import { type HoverPreviewOptions } from '../../HoverCard/types';
 export interface InlineCardResolvedViewProps {
     /** Configure visibility of server and client actions */
     actionOptions?: CardActionOptions;
+    /**
+     * When set to true, the loading skeleton for the image icon will be hidden,
+     * the image will be rendered directly.
+     */
+    hideIconLoadingSkeleton?: boolean;
     hoverPreviewOptions?: HoverPreviewOptions;
     /** The optional con of the service (e.g. Dropbox/Asana/Google/etc) to display */
     icon?: React.ReactNode;

package/dist/types-ts4.5/view/InlineCard/index.d.ts

@@ -6,4 +6,4 @@ import { InlineCardResolvingView } from './ResolvingView';
 import { type InlineCardProps } from './types';
 import { InlineCardUnauthorizedView } from './UnauthorisedView';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView, };
-export declare const InlineCard: ({ id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, actionOptions, removeTextHighlightingFromTitle, resolvingPlaceholder, truncateInline, }: InlineCardProps) => React.JSX.Element;
+export declare const InlineCard: ({ id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, actionOptions, removeTextHighlightingFromTitle, resolvingPlaceholder, truncateInline, hideIconLoadingSkeleton, }: InlineCardProps) => React.JSX.Element;

package/dist/types-ts4.5/view/InlineCard/types.d.ts

@@ -9,6 +9,7 @@ export type InlineCardProps = {
     cardState: CardState;
     handleAuthorize: (() => void) | undefined;
     handleFrameClick: EventHandler<MouseEvent | KeyboardEvent>;
+    hideIconLoadingSkeleton?: boolean;
     hoverPreviewOptions?: HoverPreviewOptions;
     id: string;
     inlinePreloaderStyle?: InlinePreloaderStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "40.13.2",
+	"version": "40.14.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -61,15 +61,15 @@
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.3.0",
-		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/section-message": "^8.5.0",
+		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/section-message": "^8.6.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^11.7.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/theme": "^20.0.0",
+		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -98,7 +98,7 @@
 		"@atlaskit/analytics-listeners": "^9.0.0",
 		"@atlaskit/css-reset": "^7.3.0",
 		"@atlaskit/media-test-helpers": "^39.0.0",
-		"@atlaskit/react-ufo": "^4.4.0",
+		"@atlaskit/react-ufo": "^4.5.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/analytics-tooling": "^0.5.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",