@atlaskit/smart-card 42.2.1 → 42.2.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 42.2.2
+
+### Patch Changes
+
+- [`28644626ba801`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28644626ba801) -
+  Start implementation of future `placeholderData` prop to `CardSSR` - which will be used to supply
+  data exclusively for initial render. The regular request to ORS is still performed and its data
+  will be used once available.
+- Updated dependencies
+
 ## 42.2.1
 
 ### Patch Changes

package/dist/cjs/state/actions/index.js

@@ -11,13 +11,14 @@ var _react = require("react");
 var _linkProvider = require("@atlaskit/link-provider");
 var _linkingCommon = require("@atlaskit/linking-common");
 var _outboundAuthFlowClient = require("@atlaskit/outbound-auth-flow-client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _analytics = require("../analytics");
 var _helpers = require("../helpers");
 var _useInvokeClientAction = _interopRequireDefault(require("../hooks/use-invoke-client-action"));
 var _useResolve = _interopRequireDefault(require("../hooks/use-resolve"));
-var useSmartCardActions = exports.useSmartCardActions = function useSmartCardActions(id, url) {
+var useSmartCardActions = exports.useSmartCardActions = function useSmartCardActions(id, url, placeholderData) {
   var resolveUrl = (0, _useResolve.default)();
   var invokeClientAction = (0, _useInvokeClientAction.default)({});
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
@@ -27,8 +28,9 @@ var useSmartCardActions = exports.useSmartCardActions = function useSmartCardAct
   var getState = store.getState,
     dispatch = store.dispatch;
   var getSmartLinkState = (0, _react.useCallback)(function () {
-    var _getState$url;
-    var _ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+    var _ref2, _getState$url;
+    var placeholderObject = (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? placeholderData : undefined;
+    var _ref = (_ref2 = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : placeholderObject) !== null && _ref2 !== void 0 ? _ref2 : {
         status: _constants.SmartLinkStatus.Pending
       },
       details = _ref.details,
@@ -39,7 +41,7 @@ var useSmartCardActions = exports.useSmartCardActions = function useSmartCardAct
       status: status,
       metadataStatus: metadataStatus
     };
-  }, [getState, url]);
+  }, [getState, url, placeholderData]);
   var setMetadataStatus = (0, _react.useCallback)(function (metadataStatus) {
     dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_UPDATE_METADATA_STATUS, {
       url: url
@@ -152,7 +154,7 @@ var useSmartCardActions = exports.useSmartCardActions = function useSmartCardAct
     }
   }, [getSmartLinkState, id, reload, fireEvent]);
   var invoke = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(opts, appearance) {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(opts, appearance) {
       var key, action, source;
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -179,7 +181,7 @@ var useSmartCardActions = exports.useSmartCardActions = function useSmartCardAct
       }, _callee2);
     }));
     return function (_x, _x2) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }(), [invokeClientAction]);
   return (0, _react.useMemo)(function () {

package/dist/cjs/state/hooks/useSmartLink.js

@@ -12,13 +12,13 @@ var _actions = require("../actions");
 var _config = require("../config");
 var _renderers = require("../renderers");
 var _store = require("../store");
-function useSmartLink(id, url) {
-  var state = (0, _store.useSmartCardState)(url);
+function useSmartLink(id, url, placeholderData) {
+  var state = (0, _store.useSmartCardState)(url, placeholderData);
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
     store = _useSmartLinkContext.store,
     isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
     openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
-  var actions = (0, _actions.useSmartCardActions)(id, url);
+  var actions = (0, _actions.useSmartCardActions)(id, url, placeholderData);
   var config = (0, _config.useSmartLinkConfig)();
   var renderers = (0, _renderers.useSmartLinkRenderers)();
 

package/dist/cjs/state/store/index.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSmartCardState = useSmartCardState;
 var _withSelector = require("use-sync-external-store/shim/with-selector");
 var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var PENDING_STATE = {
   status: 'pending'
 };
-function useSmartCardState(url) {
+function useSmartCardState(url, placeholderData) {
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
     store = _useSmartLinkContext.store;
   var cardState = (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getState, store.getState, function (state) {
     return state[url];
   });
+  if ((0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards')) {
+    return (cardState === null || cardState === void 0 ? void 0 : cardState.status) !== 'resolved' && placeholderData ? placeholderData : cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
+  }
   return cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
 }

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: "0.0.0-development"
+  packageVersion: "42.2.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -29,6 +29,9 @@ var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
 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 thirdPartyARIPrefix = 'ari:third-party';
+var isValidPlaceholderData = function isValidPlaceholderData(placeholderData) {
+  return (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
+};
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -55,14 +58,31 @@ function Component(_ref) {
     truncateInline = _ref.truncateInline,
     CompetitorPrompt = _ref.CompetitorPrompt,
     hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton,
-    disablePreviewPanel = _ref.disablePreviewPanel;
+    disablePreviewPanel = _ref.disablePreviewPanel,
+    placeholderData = _ref.placeholderData;
   var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var isFlexibleUi = (0, _react.useMemo)(function () {
+    return (0, _flexible.isFlexibleUiCard)(children, ui);
+  }, [children, ui]);
+  var structuredPlaceholderData = (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useMemo)(function () {
+    // execute some basic validation logic to ensure we should consider using placeholder data
+    if (appearance === 'inline' && !isFlexibleUi && isValidPlaceholderData(placeholderData)) {
+      var data = {
+        status: 'resolved',
+        metadataStatus: undefined,
+        details: placeholderData
+      };
+      return data;
+    }
+  }, [appearance, isFlexibleUi, placeholderData]) : undefined;
 
   // Get state, actions for this card.
-  var _useSmartLink = (0, _state.useSmartLink)(id, url),
+  var _useSmartLink = (0, _state.useSmartLink)(id, url, (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? structuredPlaceholderData : undefined),
     state = _useSmartLink.state,
     actions = _useSmartLink.actions,
     config = _useSmartLink.config,
@@ -78,9 +98,6 @@ function Component(_ref) {
   var services = (0, _helpers.getServices)(state.details);
   var thirdPartyARI = (0, _helpers.getThirdPartyARI)(state.details);
   var firstPartyIdentifier = (0, _helpers.getFirstPartyIdentifier)();
-  var isFlexibleUi = (0, _react.useMemo)(function () {
-    return (0, _flexible.isFlexibleUiCard)(children, ui);
-  }, [children, ui]);
   var actionOptions = (0, _combineActionOptions.combineActionOptions)({
     actionOptions: actionOptionsProp,
     platform: platform

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

@@ -25,7 +25,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
 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 PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development",
+  packageVersion: "42.2.1",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/state/actions/index.js

@@ -2,13 +2,14 @@ import { useCallback, useMemo } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ACTION_RESOLVING, ACTION_UPDATE_METADATA_STATUS, cardAction } from '@atlaskit/linking-common';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { SmartLinkStatus } from '../../constants';
 import { startUfoExperience } from '../analytics';
 import { getByDefinitionId, getDefinitionId, getExtensionKey, getServices } from '../helpers';
 import useInvokeClientAction from '../hooks/use-invoke-client-action';
 import useResolve from '../hooks/use-resolve';
-export const useSmartCardActions = (id, url) => {
+export const useSmartCardActions = (id, url, placeholderData) => {
   const resolveUrl = useResolve();
   const invokeClientAction = useInvokeClientAction({});
   const {
@@ -22,12 +23,13 @@ export const useSmartCardActions = (id, url) => {
     dispatch
   } = store;
   const getSmartLinkState = useCallback(() => {
-    var _getState$url;
+    var _ref, _getState$url;
+    const placeholderObject = fg('platform_initial_data_for_smart_cards') ? placeholderData : undefined;
     const {
       details,
       status,
       metadataStatus
-    } = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+    } = (_ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : placeholderObject) !== null && _ref !== void 0 ? _ref : {
       status: SmartLinkStatus.Pending
     };
     return {
@@ -35,7 +37,7 @@ export const useSmartCardActions = (id, url) => {
       status,
       metadataStatus
     };
-  }, [getState, url]);
+  }, [getState, url, placeholderData]);
   const setMetadataStatus = useCallback(metadataStatus => {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url

package/dist/es2019/state/hooks/useSmartLink.js

@@ -4,14 +4,14 @@ import { useSmartCardActions as useSmartLinkActions } from '../actions';
 import { useSmartLinkConfig } from '../config';
 import { useSmartLinkRenderers } from '../renderers';
 import { useSmartCardState as useSmartLinkState } from '../store';
-export function useSmartLink(id, url) {
-  const state = useSmartLinkState(url);
+export function useSmartLink(id, url, placeholderData) {
+  const state = useSmartLinkState(url, placeholderData);
   const {
     store,
     isPreviewPanelAvailable,
     openPreviewPanel
   } = useSmartLinkContext();
-  const actions = useSmartLinkActions(id, url);
+  const actions = useSmartLinkActions(id, url, placeholderData);
   const config = useSmartLinkConfig();
   const renderers = useSmartLinkRenderers();
 

package/dist/es2019/state/store/index.js

@@ -1,12 +1,16 @@
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 const PENDING_STATE = {
   status: 'pending'
 };
-export function useSmartCardState(url) {
+export function useSmartCardState(url, placeholderData) {
   const {
     store
   } = useSmartLinkContext();
   const cardState = useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, state => state[url]);
+  if (fg('platform_initial_data_for_smart_cards')) {
+    return (cardState === null || cardState === void 0 ? void 0 : cardState.status) !== 'resolved' && placeholderData ? placeholderData : cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
+  }
   return cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
 }

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: "0.0.0-development"
+  packageVersion: "42.2.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -20,6 +20,7 @@ import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 const thirdPartyARIPrefix = 'ari:third-party';
+const isValidPlaceholderData = placeholderData => (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
 function Component({
   id,
   url,
@@ -46,7 +47,8 @@ function Component({
   truncateInline,
   CompetitorPrompt,
   hideIconLoadingSkeleton,
-  disablePreviewPanel
+  disablePreviewPanel,
+  placeholderData
 }) {
   const {
     createAnalyticsEvent
@@ -54,6 +56,20 @@ function Component({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
+  const structuredPlaceholderData = fg('platform_initial_data_for_smart_cards') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => {
+    // execute some basic validation logic to ensure we should consider using placeholder data
+    if (appearance === 'inline' && !isFlexibleUi && isValidPlaceholderData(placeholderData)) {
+      const data = {
+        status: 'resolved',
+        metadataStatus: undefined,
+        details: placeholderData
+      };
+      return data;
+    }
+  }, [appearance, isFlexibleUi, placeholderData]) : undefined;
 
   // Get state, actions for this card.
   const {
@@ -64,7 +80,7 @@ function Component({
     error,
     isPreviewPanelAvailable,
     openPreviewPanel
-  } = useSmartLink(id, url);
+  } = useSmartLink(id, url, fg('platform_initial_data_for_smart_cards') ? structuredPlaceholderData : undefined);
   const ari = getObjectAri(state.details);
   const name = getObjectName(state.details);
   const definitionId = getDefinitionId(state.details);
@@ -73,7 +89,6 @@ function Component({
   const services = getServices(state.details);
   const thirdPartyARI = getThirdPartyARI(state.details);
   const firstPartyIdentifier = getFirstPartyIdentifier();
-  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
   const actionOptions = combineActionOptions({
     actionOptions: actionOptionsProp,
     platform

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

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

package/dist/esm/state/actions/index.js

@@ -4,13 +4,14 @@ import { useCallback, useMemo } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ACTION_RESOLVING, ACTION_UPDATE_METADATA_STATUS, cardAction } from '@atlaskit/linking-common';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { SmartLinkStatus } from '../../constants';
 import { startUfoExperience } from '../analytics';
 import { getByDefinitionId, getDefinitionId, getExtensionKey, getServices } from '../helpers';
 import useInvokeClientAction from '../hooks/use-invoke-client-action';
 import useResolve from '../hooks/use-resolve';
-export var useSmartCardActions = function useSmartCardActions(id, url) {
+export var useSmartCardActions = function useSmartCardActions(id, url, placeholderData) {
   var resolveUrl = useResolve();
   var invokeClientAction = useInvokeClientAction({});
   var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -20,8 +21,9 @@ export var useSmartCardActions = function useSmartCardActions(id, url) {
   var getState = store.getState,
     dispatch = store.dispatch;
   var getSmartLinkState = useCallback(function () {
-    var _getState$url;
-    var _ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+    var _ref2, _getState$url;
+    var placeholderObject = fg('platform_initial_data_for_smart_cards') ? placeholderData : undefined;
+    var _ref = (_ref2 = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : placeholderObject) !== null && _ref2 !== void 0 ? _ref2 : {
         status: SmartLinkStatus.Pending
       },
       details = _ref.details,
@@ -32,7 +34,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url) {
       status: status,
       metadataStatus: metadataStatus
     };
-  }, [getState, url]);
+  }, [getState, url, placeholderData]);
   var setMetadataStatus = useCallback(function (metadataStatus) {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url: url
@@ -145,7 +147,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url) {
     }
   }, [getSmartLinkState, id, reload, fireEvent]);
   var invoke = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(opts, appearance) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(opts, appearance) {
       var key, action, source;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -172,7 +174,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url) {
       }, _callee2);
     }));
     return function (_x, _x2) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }(), [invokeClientAction]);
   return useMemo(function () {

package/dist/esm/state/hooks/useSmartLink.js

@@ -5,13 +5,13 @@ import { useSmartCardActions as useSmartLinkActions } from '../actions';
 import { useSmartLinkConfig } from '../config';
 import { useSmartLinkRenderers } from '../renderers';
 import { useSmartCardState as useSmartLinkState } from '../store';
-export function useSmartLink(id, url) {
-  var state = useSmartLinkState(url);
+export function useSmartLink(id, url, placeholderData) {
+  var state = useSmartLinkState(url, placeholderData);
   var _useSmartLinkContext = useSmartLinkContext(),
     store = _useSmartLinkContext.store,
     isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
     openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
-  var actions = useSmartLinkActions(id, url);
+  var actions = useSmartLinkActions(id, url, placeholderData);
   var config = useSmartLinkConfig();
   var renderers = useSmartLinkRenderers();
 

package/dist/esm/state/store/index.js

@@ -1,13 +1,17 @@
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 var PENDING_STATE = {
   status: 'pending'
 };
-export function useSmartCardState(url) {
+export function useSmartCardState(url, placeholderData) {
   var _useSmartLinkContext = useSmartLinkContext(),
     store = _useSmartLinkContext.store;
   var cardState = useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, function (state) {
     return state[url];
   });
+  if (fg('platform_initial_data_for_smart_cards')) {
+    return (cardState === null || cardState === void 0 ? void 0 : cardState.status) !== 'resolved' && placeholderData ? placeholderData : cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
+  }
   return cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
 }

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

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

@@ -20,6 +20,9 @@ import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 var thirdPartyARIPrefix = 'ari:third-party';
+var isValidPlaceholderData = function isValidPlaceholderData(placeholderData) {
+  return (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
+};
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -46,14 +49,31 @@ function Component(_ref) {
     truncateInline = _ref.truncateInline,
     CompetitorPrompt = _ref.CompetitorPrompt,
     hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton,
-    disablePreviewPanel = _ref.disablePreviewPanel;
+    disablePreviewPanel = _ref.disablePreviewPanel,
+    placeholderData = _ref.placeholderData;
   var _useAnalyticsEventsNe = useAnalyticsEventsNext(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var isFlexibleUi = useMemo(function () {
+    return isFlexibleUiCard(children, ui);
+  }, [children, ui]);
+  var structuredPlaceholderData = fg('platform_initial_data_for_smart_cards') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(function () {
+    // execute some basic validation logic to ensure we should consider using placeholder data
+    if (appearance === 'inline' && !isFlexibleUi && isValidPlaceholderData(placeholderData)) {
+      var data = {
+        status: 'resolved',
+        metadataStatus: undefined,
+        details: placeholderData
+      };
+      return data;
+    }
+  }, [appearance, isFlexibleUi, placeholderData]) : undefined;
 
   // Get state, actions for this card.
-  var _useSmartLink = useSmartLink(id, url),
+  var _useSmartLink = useSmartLink(id, url, fg('platform_initial_data_for_smart_cards') ? structuredPlaceholderData : undefined),
     state = _useSmartLink.state,
     actions = _useSmartLink.actions,
     config = _useSmartLink.config,
@@ -69,9 +89,6 @@ function Component(_ref) {
   var services = getServices(state.details);
   var thirdPartyARI = getThirdPartyARI(state.details);
   var firstPartyIdentifier = getFirstPartyIdentifier();
-  var isFlexibleUi = useMemo(function () {
-    return isFlexibleUiCard(children, ui);
-  }, [children, ui]);
   var actionOptions = combineActionOptions({
     actionOptions: actionOptionsProp,
     platform: platform

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

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

package/dist/types/state/actions/index.d.ts

@@ -1,7 +1,8 @@
 import { type JsonLd } from '@atlaskit/json-ld-types';
+import { type CardState } from '@atlaskit/linking-common';
 import { type InvokeClientOpts, type InvokeServerOpts } from '../../model/invoke-opts';
 import { type CardInnerAppearance } from '../../view/Card/types';
-export declare const useSmartCardActions: (id: string, url: string) => {
+export declare const useSmartCardActions: (id: string, url: string, placeholderData?: CardState) => {
     register: () => Promise<void>;
     reload: () => void;
     authorize: (appearance: CardInnerAppearance) => void;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -1,5 +1,6 @@
-export declare function useSmartLink(id: string, url: string): {
-    state: import("@atlaskit/linking-common").CardState;
+import type { CardState } from '@atlaskit/linking-common';
+export declare function useSmartLink(id: string, url: string, placeholderData?: CardState): {
+    state: CardState;
     actions: {
         register: () => Promise<void>;
         reload: () => void;

package/dist/types/state/store/index.d.ts

@@ -1,3 +1,3 @@
 import { type CardState } from '@atlaskit/linking-common';
 export type { CardType } from '@atlaskit/linking-common';
-export declare function useSmartCardState(url: string): CardState;
+export declare function useSmartCardState(url: string, placeholderData?: CardState): CardState;

package/dist/types-ts4.5/state/actions/index.d.ts

@@ -1,7 +1,8 @@
 import { type JsonLd } from '@atlaskit/json-ld-types';
+import { type CardState } from '@atlaskit/linking-common';
 import { type InvokeClientOpts, type InvokeServerOpts } from '../../model/invoke-opts';
 import { type CardInnerAppearance } from '../../view/Card/types';
-export declare const useSmartCardActions: (id: string, url: string) => {
+export declare const useSmartCardActions: (id: string, url: string, placeholderData?: CardState) => {
     register: () => Promise<void>;
     reload: () => void;
     authorize: (appearance: CardInnerAppearance) => void;

package/dist/types-ts4.5/state/hooks/useSmartLink.d.ts

@@ -1,5 +1,6 @@
-export declare function useSmartLink(id: string, url: string): {
-    state: import("@atlaskit/linking-common").CardState;
+import type { CardState } from '@atlaskit/linking-common';
+export declare function useSmartLink(id: string, url: string, placeholderData?: CardState): {
+    state: CardState;
     actions: {
         register: () => Promise<void>;
         reload: () => void;

package/dist/types-ts4.5/state/store/index.d.ts

@@ -1,3 +1,3 @@
 import { type CardState } from '@atlaskit/linking-common';
 export type { CardType } from '@atlaskit/linking-common';
-export declare function useSmartCardState(url: string): CardState;
+export declare function useSmartCardState(url: string, placeholderData?: CardState): CardState;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "42.2.1",
+	"version": "42.2.2",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/afm-i18n-platform-linking-platform-smart-card": "2.6.0",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.1.0",
+		"@atlaskit/avatar": "^25.2.0",
 		"@atlaskit/avatar-group": "^12.2.0",
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/button": "^23.4.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.29.0",
+		"@atlaskit/tmp-editor-statsig": "^12.30.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -238,6 +238,9 @@
 		"navx-1895-a11y-close-button-in-preview-modal": {
 			"type": "boolean"
 		},
+		"platform_initial_data_for_smart_cards": {
+			"type": "boolean"
+		},
 		"jfp-magma-platform-lozenge-jump-fix": {
 			"type": "boolean"
 		}