@atlaskit/smart-card 40.14.1 → 40.15.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 40.15.1
+
+### Patch Changes
+
+- [`bfec478c9e91b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfec478c9e91b) -
+  Splits platform_editor_preview_panel_linking_exp into one for Jira and one for Confluence and
+  switches to editorExperiment util.
+- Updated dependencies
+
+## 40.15.0
+
+### Minor Changes
+
+- [`3d884c026efef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d884c026efef) -
+  The `EmbedCard` starts `hideIconLoadingSkeleton` prop supporting, that allows not rendering the
+  loading placeholder in SSR
+
 ## 40.14.1
 
 ### 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.14.0"
+  packageVersion: "40.15.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -9,7 +9,7 @@ exports.CardWithUrlContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _state = require("../../state");
@@ -117,7 +117,9 @@ function Component(_ref) {
         }
       }
     }
-    var isDisablePreviewPanel = disablePreviewPanel && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_linking_exp', 'isEnabled', true);
+    var isDisablePreviewPanel = disablePreviewPanel && (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
+      exposure: true
+    });
 
     // If preview panel is available and the user clicked on the link,
     // delegate the click to the preview panel handler
@@ -327,7 +329,8 @@ function Component(_ref) {
         ref: embedIframeRef,
         onIframeDwell: onIframeDwell,
         onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
   }
 }

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

@@ -2,15 +2,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageIcon = void 0;
 require("./ImageIcon.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _styled = require("./styled");
+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 = {
   roundedImage: "_2rko1twn"
 };
@@ -23,24 +28,51 @@ var ImageIcon = exports.ImageIcon = function ImageIcon(_ref) {
     title = _ref.title,
     defaultIcon = _ref.default,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance;
+    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
+    hideLoadingSkeleton = _ref.hideLoadingSkeleton;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If url changes, reset state
+  (0, _react.useEffect)(function () {
+    if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(false);
+    }
+  }, [src]);
+  var handleError = (0, _react.useCallback)(function () {
+    if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(true);
+    }
+  }, []);
+
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hasImageErrored) {
+    return defaultIcon;
+  }
   var LoadedImageComponent = /*#__PURE__*/_react.default.createElement(_styled.Image
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
+  , (0, _extends2.default)({
     className: (0, _runtime.ax)([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
     src: src,
     alt: alt,
     size: size,
     title: title
-  });
-  return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
-    src: src,
-    loading: defaultIcon,
-    loaded: LoadedImageComponent,
-    errored: defaultIcon
-  });
+  }, hideLoadingSkeleton && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ? {
+    onError: handleError
+  } : undefined));
+  if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton) {
+    return LoadedImageComponent;
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+      src: src,
+      loading: defaultIcon,
+      loaded: LoadedImageComponent,
+      errored: defaultIcon
+    });
+  }
 };

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

@@ -52,7 +52,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
     iframeUrlType = _ref2.iframeUrlType,
     actionOptions = _ref2.actionOptions,
     renderers = _ref2.renderers,
-    CompetitorPrompt = _ref2.CompetitorPrompt;
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -110,7 +111,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
           testId: testId,
-          CompetitorPrompt: CompetitorPrompt
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton
         }));
       } else {
         if (platform === 'mobile') {

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

@@ -30,7 +30,8 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     onIframeFocus = _ref.onIframeFocus,
     isSupportTheming = _ref.isSupportTheming,
     type = _ref.type,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -49,9 +50,10 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
       src: src,
       default: linkGlyph,
-      appearance: (0, _utils.isProfileType)(type) ? 'round' : 'square'
+      appearance: (0, _utils.isProfileType)(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
     });
-  }, [iconFromContext, src, linkGlyph, type]);
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
   if ((0, _platformFeatureFlags.fg)('ptc-enable-embed-team-smart-links')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, _useEmbedResolvePostMessageListener.useEmbedResolvePostMessageListener)({

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../../../constants");
 var _actions = require("../../../state/actions");
 var _renderers = require("../../../state/renderers");
@@ -215,7 +215,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       onClick: onChildClick,
       onContextMenu: onContextMenuClick,
       "data-testid": HOVER_CARD_TRIGGER_WRAPPER
-    }, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_linking_exp', 'isEnabled', true) ? {
+    }, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) ? {
       className: HOVER_CARD_TRIGGER_WRAPPER
     } : {}), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);

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.14.0",
+  packageVersion: "40.15.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.14.0"
+  packageVersion: "40.15.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
@@ -110,7 +110,9 @@ function Component({
         }
       }
     }
-    const isDisablePreviewPanel = disablePreviewPanel && expValEquals('platform_editor_preview_panel_linking_exp', 'isEnabled', true);
+    const isDisablePreviewPanel = disablePreviewPanel && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+      exposure: true
+    });
 
     // If preview panel is available and the user clicked on the link,
     // delegate the click to the preview panel handler
@@ -316,7 +318,8 @@ function Component({
         ref: embedIframeRef,
         onIframeDwell: onIframeDwell,
         onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
   }
 }

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

@@ -1,8 +1,10 @@
 /* ImageIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ImageIcon.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ImageLoader from 'react-render-image';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Image } from './styled';
 const styles = {
   roundedImage: "_2rko1twn"
@@ -13,25 +15,49 @@ export const ImageIcon = ({
   size = 16,
   title,
   default: defaultIcon,
-  appearance = 'square'
+  appearance = 'square',
+  hideLoadingSkeleton
 }) => {
+  const [hasImageErrored, setHasImageErrored] = useState(false);
+
+  // If url changes, reset state
+  useEffect(() => {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(false);
+    }
+  }, [src]);
+  const handleError = useCallback(() => {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(true);
+    }
+  }, []);
+
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hasImageErrored) {
+    return defaultIcon;
+  }
   const LoadedImageComponent = /*#__PURE__*/React.createElement(Image
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
+  , _extends({
     className: ax([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
     src: src,
     alt: alt,
     size: size,
     title: title
-  });
-  return /*#__PURE__*/React.createElement(ImageLoader, {
-    src: src,
-    loading: defaultIcon,
-    loaded: LoadedImageComponent,
-    errored: defaultIcon
-  });
+  }, hideLoadingSkeleton && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? {
+    onError: handleError
+  } : undefined));
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton) {
+    return LoadedImageComponent;
+  } else {
+    return /*#__PURE__*/React.createElement(ImageLoader, {
+      src: src,
+      loading: defaultIcon,
+      loaded: LoadedImageComponent,
+      errored: defaultIcon
+    });
+  }
 };

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

@@ -44,7 +44,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   iframeUrlType,
   actionOptions,
   renderers,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }, iframeRef) => {
   var _details$meta, _forbiddenViewProps$c, _forbiddenViewProps$c2, _notFoundViewProps$co, _notFoundViewProps$co2;
   const {
@@ -107,7 +108,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
           testId: testId,
-          CompetitorPrompt: CompetitorPrompt
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton
         }));
       } else {
         if (platform === 'mobile') {

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

@@ -22,7 +22,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   onIframeFocus,
   isSupportTheming,
   type,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }, embedIframeRef) => {
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
@@ -40,9 +41,10 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(ImageIcon, {
       src: src,
       default: linkGlyph,
-      appearance: isProfileType(type) ? 'round' : 'square'
+      appearance: isProfileType(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
     });
-  }, [iconFromContext, src, linkGlyph, type]);
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
   if (fg('ptc-enable-embed-team-smart-links')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEmbedResolvePostMessageListener({

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import Popup from '@atlaskit/popup';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ActionName, CardDisplay } from '../../../constants';
 import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
@@ -192,7 +192,7 @@ export const HoverCardComponent = ({
     onClick: onChildClick,
     onContextMenu: onContextMenuClick,
     "data-testid": HOVER_CARD_TRIGGER_WRAPPER
-  }, expValEqualsNoExposure('platform_editor_preview_panel_linking_exp', 'isEnabled', true) ? {
+  }, editorExperiment('platform_editor_preview_panel_linking_exp', true) ? {
     className: HOVER_CARD_TRIGGER_WRAPPER
   } : {}), children)), [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
   return /*#__PURE__*/React.createElement(Popup, {

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.14.0",
+  packageVersion: "40.15.0",
   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.14.0"
+  packageVersion: "40.15.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
@@ -108,7 +108,9 @@ function Component(_ref) {
         }
       }
     }
-    var isDisablePreviewPanel = disablePreviewPanel && expValEquals('platform_editor_preview_panel_linking_exp', 'isEnabled', true);
+    var isDisablePreviewPanel = disablePreviewPanel && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+      exposure: true
+    });
 
     // If preview panel is available and the user clicked on the link,
     // delegate the click to the preview panel handler
@@ -318,7 +320,8 @@ function Component(_ref) {
         ref: embedIframeRef,
         onIframeDwell: onIframeDwell,
         onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
   }
 }

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

@@ -1,8 +1,11 @@
 /* ImageIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ImageIcon.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ImageLoader from 'react-render-image';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Image } from './styled';
 var styles = {
   roundedImage: "_2rko1twn"
@@ -16,24 +19,51 @@ export var ImageIcon = function ImageIcon(_ref) {
     title = _ref.title,
     defaultIcon = _ref.default,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance;
+    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
+    hideLoadingSkeleton = _ref.hideLoadingSkeleton;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If url changes, reset state
+  useEffect(function () {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(false);
+    }
+  }, [src]);
+  var handleError = useCallback(function () {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(true);
+    }
+  }, []);
+
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hasImageErrored) {
+    return defaultIcon;
+  }
   var LoadedImageComponent = /*#__PURE__*/React.createElement(Image
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
+  , _extends({
     className: ax([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
     src: src,
     alt: alt,
     size: size,
     title: title
-  });
-  return /*#__PURE__*/React.createElement(ImageLoader, {
-    src: src,
-    loading: defaultIcon,
-    loaded: LoadedImageComponent,
-    errored: defaultIcon
-  });
+  }, hideLoadingSkeleton && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? {
+    onError: handleError
+  } : undefined));
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton) {
+    return LoadedImageComponent;
+  } else {
+    return /*#__PURE__*/React.createElement(ImageLoader, {
+      src: src,
+      loading: defaultIcon,
+      loaded: LoadedImageComponent,
+      errored: defaultIcon
+    });
+  }
 };

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

@@ -44,7 +44,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
     iframeUrlType = _ref2.iframeUrlType,
     actionOptions = _ref2.actionOptions,
     renderers = _ref2.renderers,
-    CompetitorPrompt = _ref2.CompetitorPrompt;
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -102,7 +103,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
           testId: testId,
-          CompetitorPrompt: CompetitorPrompt
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton
         }));
       } else {
         if (platform === 'mobile') {

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

@@ -23,7 +23,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     onIframeFocus = _ref.onIframeFocus,
     isSupportTheming = _ref.isSupportTheming,
     type = _ref.type,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -42,9 +43,10 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     return /*#__PURE__*/React.createElement(ImageIcon, {
       src: src,
       default: linkGlyph,
-      appearance: isProfileType(type) ? 'round' : 'square'
+      appearance: isProfileType(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
     });
-  }, [iconFromContext, src, linkGlyph, type]);
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
   if (fg('ptc-enable-embed-team-smart-links')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEmbedResolvePostMessageListener({

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["aria-haspopup", "aria-expanded"];
 import React, { useCallback, useEffect, useRef } from 'react';
 import Popup from '@atlaskit/popup';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ActionName, CardDisplay } from '../../../constants';
 import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
@@ -206,7 +206,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       onClick: onChildClick,
       onContextMenu: onContextMenuClick,
       "data-testid": HOVER_CARD_TRIGGER_WRAPPER
-    }, expValEqualsNoExposure('platform_editor_preview_panel_linking_exp', 'isEnabled', true) ? {
+    }, editorExperiment('platform_editor_preview_panel_linking_exp', true) ? {
       className: HOVER_CARD_TRIGGER_WRAPPER
     } : {}), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);

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.14.0",
+  packageVersion: "40.15.0",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/view/EmbedCard/components/ImageIcon.d.ts

@@ -7,8 +7,9 @@ export interface ImageIconProps {
     alt?: string;
     appearance?: 'square' | 'round';
     default?: React.ReactElement;
+    hideLoadingSkeleton?: boolean;
     size?: number;
     src?: string;
     title?: string;
 }
-export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, }: ImageIconProps) => JSX.Element | null;
+export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, hideLoadingSkeleton, }: ImageIconProps) => JSX.Element | null | undefined;

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

@@ -16,6 +16,7 @@ export type EmbedCardProps = {
     handleErrorRetry: () => void;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     handleInvoke: InvokeHandler;
+    hideIconLoadingSkeleton?: boolean;
     id?: string;
     iframeUrlType?: EmbedIframeUrlType;
     inheritDimensions?: boolean;

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -10,6 +10,8 @@ export interface EmbedCardResolvedViewProps {
     context?: ContextViewModel;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
+    /** For image icons in the title, whether to hide the loading skeleton while the image is loading. */
+    hideIconLoadingSkeleton?: boolean;
     inheritDimensions?: boolean;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;

package/dist/types-ts4.5/view/EmbedCard/components/ImageIcon.d.ts

@@ -7,8 +7,9 @@ export interface ImageIconProps {
     alt?: string;
     appearance?: 'square' | 'round';
     default?: React.ReactElement;
+    hideLoadingSkeleton?: boolean;
     size?: number;
     src?: string;
     title?: string;
 }
-export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, }: ImageIconProps) => JSX.Element | null;
+export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, hideLoadingSkeleton, }: ImageIconProps) => JSX.Element | null | undefined;

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

@@ -16,6 +16,7 @@ export type EmbedCardProps = {
     handleErrorRetry: () => void;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     handleInvoke: InvokeHandler;
+    hideIconLoadingSkeleton?: boolean;
     id?: string;
     iframeUrlType?: EmbedIframeUrlType;
     inheritDimensions?: boolean;

package/dist/types-ts4.5/view/EmbedCard/views/ResolvedView.d.ts

@@ -10,6 +10,8 @@ export interface EmbedCardResolvedViewProps {
     context?: ContextViewModel;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
+    /** For image icons in the title, whether to hide the loading skeleton while the image is loading. */
+    hideIconLoadingSkeleton?: boolean;
     inheritDimensions?: boolean;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "40.14.1",
+	"version": "40.15.1",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^20.0.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^11.10.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/ufo": "^0.4.0",