@atlaskit/smart-card 15.5.0 → 16.2.0

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

@@ -9,6 +9,7 @@ import { useSmartLinkContext } from '../context';
 import * as measure from '../../utils/performance';
 import { APIError } from '../../client/errors';
 import { getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { addMetadataToExperience } from '../analytics';
 export var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
   var _useSmartLinkContext = useSmartLinkContext(),
       store = _useSmartLinkContext.store,
@@ -20,16 +21,13 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
 
   var _ref = getState()[url] || {
     status: 'pending',
-    lastUpdatedAt: Date.now(),
     details: undefined
   },
       details = _ref.details,
-      lastUpdatedAt = _ref.lastUpdatedAt,
       status = _ref.status;
 
   var hasAuthFlowSupported = config.authFlow !== 'disabled';
   var hasData = !!(details && details.data);
-  var hasExpired = Date.now() - lastUpdatedAt >= config.maxAge;
   var handleResolvedLinkError = useCallback(function (url, error) {
     if (error.kind === 'fatal') {
       // If there's no previous data in the store for this URL, then bail
@@ -86,10 +84,9 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
 
 
     dispatch(cardAction(ACTION_RESOLVED, {
-      url: resourceUrl,
-      hasExpired: hasExpired && !hasData
+      url: resourceUrl
     }, response));
-  }, [dispatch, handleResolvedLinkError, hasData, hasExpired, hasAuthFlowSupported]);
+  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   var resolve = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var resourceUrl,
         isReloading,
@@ -101,8 +98,8 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
             resourceUrl = _args.length > 0 && _args[0] !== undefined ? _args[0] : url;
             isReloading = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
 
-            if (!(isReloading || hasExpired || !hasData)) {
-              _context.next = 4;
+            if (!(isReloading || !hasData)) {
+              _context.next = 6;
               break;
             }
 
@@ -112,13 +109,18 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
               return handleResolvedLinkError(resourceUrl, error);
             }));
 
-          case 4:
+          case 6:
+            addMetadataToExperience('smart-link-rendered', id, {
+              cached: true
+            });
+
+          case 7:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
-  })), [url, hasData, hasExpired, connections.client, handleResolvedLinkResponse, handleResolvedLinkError]);
+  })), [url, hasData, connections.client, handleResolvedLinkResponse, handleResolvedLinkError, id]);
   var register = useCallback(function () {
     if (!details) {
       dispatch(cardAction(ACTION_PENDING, {
@@ -156,10 +158,10 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
       analytics.screen.authPopupEvent(definitionId, extensionKey);
       auth(services[0].url).then(function () {
         analytics.track.appAccountConnected(definitionId, extensionKey);
-        analytics.operational.connectSucceededEvent(definitionId, extensionKey);
+        analytics.operational.connectSucceededEvent(id, definitionId, extensionKey);
         reload();
       }, function (err) {
-        analytics.operational.connectFailedEvent(definitionId, extensionKey, err.type);
+        analytics.operational.connectFailedEvent(id, definitionId, extensionKey, err.type);
 
         if (err.type === 'auth_window_closed') {
           analytics.ui.closedAuthEvent(appearance, definitionId, extensionKey);
@@ -168,7 +170,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
         reload();
       });
     }
-  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, reload, details, status]);
+  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
   var invoke = useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(opts, appearance) {
       var key, action, source, markName, response;

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

@@ -1,80 +1,2 @@
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiRenderFailedEvent, resolvedEvent as _resolvedEvent, unresolvedEvent as _unresolvedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
-import { useMemo } from 'react';
-export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
-  var ui = useMemo(function () {
-    return {
-      authEvent: function authEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey));
-      },
-      authAlternateAccountEvent: function authAlternateAccountEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey));
-      },
-      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey));
-      },
-      actionClickedEvent: function actionClickedEvent(providerKey, actionType, display) {
-        return dispatchAnalytics(uiActionClickedEvent(providerKey, actionType, display));
-      },
-      closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey));
-      },
-      renderSuccessEvent: function renderSuccessEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
-      },
-      renderFailedEvent: function renderFailedEvent(display, error, errorInfo) {
-        return dispatchAnalytics(uiRenderFailedEvent(display, error, errorInfo));
-      }
-    };
-  }, [dispatchAnalytics]);
-  var operational = useMemo(function () {
-    return {
-      resolvedEvent: function resolvedEvent(id, definitionId, extensionKey, resourceType) {
-        return dispatchAnalytics(_resolvedEvent(id, definitionId, extensionKey, resourceType));
-      },
-      unresolvedEvent: function unresolvedEvent(id, status, definitionId, extensionKey, resourceType) {
-        return dispatchAnalytics(_unresolvedEvent(id, status, definitionId, extensionKey, resourceType));
-      },
-      invokeSucceededEvent: function invokeSucceededEvent(id, providerKey, actionType, display) {
-        return dispatchAnalytics(_invokeSucceededEvent(id, providerKey, actionType, display));
-      },
-      invokeFailedEvent: function invokeFailedEvent(id, providerKey, actionType, display, reason) {
-        return dispatchAnalytics(_invokeFailedEvent(id, providerKey, actionType, display, reason));
-      },
-      connectSucceededEvent: function connectSucceededEvent(definitionId, extensionKey) {
-        return dispatchAnalytics(_connectSucceededEvent(definitionId, extensionKey));
-      },
-      connectFailedEvent: function connectFailedEvent(definitionId, extensionKey, reason) {
-        return dispatchAnalytics(_connectFailedEvent(definitionId, extensionKey, reason));
-      },
-      instrument: function instrument(id, status, definitionId, extensionKey, resourceType, error) {
-        var event = instrumentEvent(id, status, definitionId, extensionKey, resourceType, error);
-
-        if (event) {
-          dispatchAnalytics(event);
-        }
-      }
-    };
-  }, [dispatchAnalytics]);
-  var track = useMemo(function () {
-    return {
-      appAccountConnected: function appAccountConnected(definitionId, extensionKey) {
-        return dispatchAnalytics(trackAppAccountConnected(definitionId, extensionKey));
-      }
-    };
-  }, [dispatchAnalytics]);
-  var screen = useMemo(function () {
-    return {
-      authPopupEvent: function authPopupEvent(definitionId, extensionKey) {
-        return dispatchAnalytics(screenAuthPopupEvent(definitionId, extensionKey));
-      }
-    };
-  }, [dispatchAnalytics]);
-  return useMemo(function () {
-    return {
-      ui: ui,
-      operational: operational,
-      track: track,
-      screen: screen
-    };
-  }, [ui, operational, track, screen]);
-};
+export { startUfoExperience, succeedUfoExperience, failUfoExperience, addMetadataToExperience } from './ufoExperiences';
+export { useSmartLinkAnalytics } from './useSmartLinkAnalytics';

package/dist/esm/state/analytics/ufoExperiences.js

@@ -0,0 +1,40 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+var ufoExperiences = {
+  'smart-link-rendered': new ConcurrentExperience('smart-link-rendered', {
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
+    platform: {
+      component: 'smart-links'
+    }
+  }),
+  'smart-link-authenticated': new ConcurrentExperience('smart-link-authenticated', {
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
+    platform: {
+      component: 'smart-links'
+    }
+  })
+};
+export var startUfoExperience = function startUfoExperience(experienceName, id, properties) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.start();
+
+  if (properties) {
+    experience.addMetadata(properties);
+  }
+};
+export var succeedUfoExperience = function succeedUfoExperience(experienceName, id, properties) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.success({
+    metadata: properties
+  });
+};
+export var failUfoExperience = function failUfoExperience(experienceName, id, properties) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.failure({
+    metadata: properties
+  });
+};
+export var addMetadataToExperience = function addMetadataToExperience(experienceName, id, properties) {
+  ufoExperiences[experienceName].getInstance(id).addMetadata(properties);
+};

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -0,0 +1,94 @@
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent as _resolvedEvent, unresolvedEvent as _unresolvedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { useMemo } from 'react';
+import { startUfoExperience, succeedUfoExperience } from './ufoExperiences';
+export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
+  var ui = useMemo(function () {
+    return {
+      authEvent: function authEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey));
+      },
+      authAlternateAccountEvent: function authAlternateAccountEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey));
+      },
+      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey));
+      },
+      actionClickedEvent: function actionClickedEvent(providerKey, actionType, display) {
+        return dispatchAnalytics(uiActionClickedEvent(providerKey, actionType, display));
+      },
+      closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey));
+      },
+      renderSuccessEvent: function renderSuccessEvent(display, id, definitionId, extensionKey) {
+        succeedUfoExperience('smart-link-rendered', id, {
+          extensionKey: extensionKey,
+          display: display
+        }); // UFO will disregard this if authentication experience has not yet been started
+
+        succeedUfoExperience('smart-link-authenticated', id, {
+          display: display
+        });
+        dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
+      }
+    };
+  }, [dispatchAnalytics]);
+  var operational = useMemo(function () {
+    return {
+      resolvedEvent: function resolvedEvent(id, definitionId, extensionKey, resourceType) {
+        return dispatchAnalytics(_resolvedEvent(id, definitionId, extensionKey, resourceType));
+      },
+      unresolvedEvent: function unresolvedEvent(id, status, definitionId, extensionKey, resourceType) {
+        return dispatchAnalytics(_unresolvedEvent(id, status, definitionId, extensionKey, resourceType));
+      },
+      invokeSucceededEvent: function invokeSucceededEvent(id, providerKey, actionType, display) {
+        return dispatchAnalytics(_invokeSucceededEvent(id, providerKey, actionType, display));
+      },
+      invokeFailedEvent: function invokeFailedEvent(id, providerKey, actionType, display, reason) {
+        return dispatchAnalytics(_invokeFailedEvent(id, providerKey, actionType, display, reason));
+      },
+      connectSucceededEvent: function connectSucceededEvent(id, definitionId, extensionKey) {
+        startUfoExperience('smart-link-authenticated', id, {
+          extensionKey: extensionKey,
+          status: 'success'
+        });
+        dispatchAnalytics(_connectSucceededEvent(definitionId, extensionKey));
+      },
+      connectFailedEvent: function connectFailedEvent(id, definitionId, extensionKey, status) {
+        startUfoExperience('smart-link-authenticated', id, {
+          extensionKey: extensionKey,
+          status: status
+        });
+        dispatchAnalytics(_connectFailedEvent(definitionId, extensionKey, status));
+      },
+      instrument: function instrument(id, status, definitionId, extensionKey, resourceType, error) {
+        var event = instrumentEvent(id, status, definitionId, extensionKey, resourceType, error);
+
+        if (event) {
+          dispatchAnalytics(event);
+        }
+      }
+    };
+  }, [dispatchAnalytics]);
+  var track = useMemo(function () {
+    return {
+      appAccountConnected: function appAccountConnected(definitionId, extensionKey) {
+        return dispatchAnalytics(trackAppAccountConnected(definitionId, extensionKey));
+      }
+    };
+  }, [dispatchAnalytics]);
+  var screen = useMemo(function () {
+    return {
+      authPopupEvent: function authPopupEvent(definitionId, extensionKey) {
+        return dispatchAnalytics(screenAuthPopupEvent(definitionId, extensionKey));
+      }
+    };
+  }, [dispatchAnalytics]);
+  return useMemo(function () {
+    return {
+      ui: ui,
+      operational: operational,
+      track: track,
+      screen: screen
+    };
+  }, [ui, operational, track, screen]);
+};

package/dist/esm/state/context/provider.js

@@ -1,22 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
 import { useContext, useMemo } from 'react';
 import { createStore } from 'redux';
 import { cardReducer } from '../reducers';
 import { SmartCardContext } from '.';
-import { MAX_RELOAD_DELAY, MAX_LOADING_DELAY } from '../actions/constants';
 import CardClient from '../../client';
 import { extractPreview } from '../../extractors/common/preview';
 import { getUrl } from '../helpers';
 export function SmartCardProvider(_ref) {
   var storeOptions = _ref.storeOptions,
       customClient = _ref.client,
-      customCacheOptions = _ref.cacheOptions,
       customAuthFlow = _ref.authFlow,
       children = _ref.children,
       renderers = _ref.renderers;
@@ -30,10 +22,6 @@ export function SmartCardProvider(_ref) {
     var client = customClient || new CardClient();
     var store = createStore(cardReducer, initialState);
     var authFlow = customAuthFlow || 'oauth2';
-    var cacheOptions = customCacheOptions || {
-      maxAge: MAX_RELOAD_DELAY,
-      maxLoadingDelay: MAX_LOADING_DELAY
-    };
 
     var getPreview = function getPreview(url, platform) {
       var cardState = getUrl(store, url);
@@ -47,14 +35,14 @@ export function SmartCardProvider(_ref) {
       connections: {
         client: client
       },
-      config: _objectSpread(_objectSpread({}, cacheOptions), {}, {
+      config: {
         authFlow: authFlow
-      }),
+      },
       extractors: {
         getPreview: getPreview
       }
     };
-  }, [customClient, customCacheOptions, customAuthFlow, storeOptions, renderers]);
+  }, [customClient, customAuthFlow, storeOptions, renderers]);
   return /*#__PURE__*/React.createElement(SmartCardContext.Provider, {
     value: parentContext || providerValue
   }, children);

package/dist/esm/state/helpers.js

@@ -8,8 +8,7 @@ export var getByDefinitionId = function getByDefinitionId(definitionId, store) {
 };
 export var getUrl = function getUrl(store, url) {
   return store.getState()[url] || {
-    status: 'pending',
-    lastUpdatedAt: Date.now()
+    status: 'pending'
   };
 };
 export var getClickUrl = function getClickUrl(url, jsonLd) {

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

@@ -12,16 +12,15 @@ export function useSmartLink(id, url, dispatchAnalytics) {
   var config = useSmartLinkConfig();
   var renderers = useSmartLinkRenderers(); // NB: used to propagate errors from hooks to error boundaries.
 
-  var _useState = useState(),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      setState = _useState2[1]; // Register the current card.
+      error = _useState2[0],
+      setError = _useState2[1]; // Register the current card.
 
 
   var register = function register() {
     actions.register().catch(function (err) {
-      return setState(function () {
-        throw err;
-      });
+      return setError(err);
     });
   }; // AFP-2511 TODO: Fix automatic suppressions below
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -34,6 +33,7 @@ export function useSmartLink(id, url, dispatchAnalytics) {
     actions: actions,
     config: config,
     analytics: analytics,
-    renderers: renderers
+    renderers: renderers,
+    error: error
   };
 }

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

@@ -11,8 +11,7 @@ import { getStatus } from '../helpers';
 var cardReducerMap = (_cardReducerMap = {}, _defineProperty(_cardReducerMap, actions.ACTION_PENDING, function (_state, _ref) {
   var type = _ref.type;
   return {
-    status: type,
-    lastUpdatedAt: Date.now()
+    status: type
   };
 }), _defineProperty(_cardReducerMap, actions.ACTION_RESOLVING, function (state, _ref2) {
   var type = _ref2.type;
@@ -35,7 +34,6 @@ var cardReducerMap = (_cardReducerMap = {}, _defineProperty(_cardReducerMap, act
     nextState.status = type;
   }
 
-  nextState.lastUpdatedAt = Date.now();
   return nextState;
 }), _defineProperty(_cardReducerMap, actions.ACTION_ERROR, function (state, _ref4) {
   var type = _ref4.type,
@@ -57,12 +55,9 @@ export var cardReducer = function cardReducer(state, action) {
     var cardState = state[action.url]; // Card may have reached the same state on account of multiple of the same
     // URL being present in an editor session. E.g. page with N links to one resource.
 
-    var hasSameStatus = cardState && cardState.status === action.type; // Card needs to be refreshed. In this case, we ignore the same status pragma which
-    // is described above - this forces a rerender for all links of the same status.
-
-    var hasExpired = action.hasExpired;
+    var hasSameStatus = cardState && cardState.status === action.type;
 
-    if (!hasExpired && hasSameStatus) {
+    if (hasSameStatus) {
       return state;
     } else {
       var nextState = cardReducerMap[action.type](cardState, action);

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

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -12,6 +14,30 @@ export var context = {
   packageName: packageName,
   packageVersion: packageVersion
 };
+export var SmartLinkEvents = /*#__PURE__*/function () {
+  function SmartLinkEvents() {
+    _classCallCheck(this, SmartLinkEvents);
+  }
+
+  _createClass(SmartLinkEvents, [{
+    key: "insertSmartLink",
+    value: function insertSmartLink(url, type, createAnalyticsEvent) {
+      fireSmartLinkEvent({
+        action: 'inserted',
+        actionSubject: 'smartLink',
+        eventType: 'track',
+        attributes: {
+          type: type
+        },
+        nonPrivacySafeAttributes: {
+          domainName: url
+        }
+      }, createAnalyticsEvent);
+    }
+  }]);
+
+  return SmartLinkEvents;
+}();
 export var fireSmartLinkEvent = function fireSmartLinkEvent(payload, createAnalyticsEvent) {
   if (createAnalyticsEvent) {
     createAnalyticsEvent(payload).fire(ANALYTICS_CHANNEL);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "15.5.0",
+	"version": "16.2.0",
 	"sideEffects": false
 }

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

@@ -22,7 +22,8 @@ export var BlockCard = function BlockCard(_ref) {
       isSelected = _ref.isSelected,
       onResolve = _ref.onResolve,
       testId = _ref.testId,
-      showActions = _ref.showActions;
+      showActions = _ref.showActions,
+      platform = _ref.platform;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
@@ -40,7 +41,7 @@ export var BlockCard = function BlockCard(_ref) {
       });
 
     case 'resolved':
-      var resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers);
+      var resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers, platform);
 
       if (onResolve) {
         onResolve({

package/dist/esm/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CardLinkView } from '@atlaskit/media-ui';
+export var loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,
       url = _ref.url;
@@ -8,6 +9,7 @@ export var LoadingCardLink = function LoadingCardLink(_ref) {
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
-    link: url
+    link: url,
+    className: loadingPlaceholderClassName
   });
 };

package/dist/esm/view/CardWithUrl/component-lazy/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { isIntersectionObserverSupported } from '@atlaskit/media-ui';
 import { LazyLazilyRenderCard } from './LazyLazilyRenderCard';
 import { LazyIntersectionObserverCard } from './LazyIntersectionObserverCard';
-export function LazyCardWithUrlContent(props) {
+export default function LazyCardWithUrlContent(props) {
   if (isIntersectionObserverSupported()) {
     return /*#__PURE__*/React.createElement(LazyIntersectionObserverCard, props);
   } else {

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

@@ -28,7 +28,8 @@ export function CardWithUrlContent(_ref) {
       actions = _useSmartLink.actions,
       config = _useSmartLink.config,
       analytics = _useSmartLink.analytics,
-      renderers = _useSmartLink.renderers;
+      renderers = _useSmartLink.renderers,
+      error = _useSmartLink.error;
 
   var definitionId = getDefinitionId(state.details);
   var extensionKey = getExtensionKey(state.details);
@@ -71,9 +72,13 @@ export function CardWithUrlContent(_ref) {
 
   useEffect(function () {
     if (isFinalState(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui]);
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
+
+  if (error) {
+    throw error;
+  }
 
   switch (appearance) {
     case 'inline':
@@ -103,7 +108,8 @@ export function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        showActions: showActions
+        showActions: showActions,
+        platform: platform
       });
 
     case 'embed':