@atlaskit/smart-card 26.5.16 → 26.5.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.5.17
+
+### Patch Changes
+
+- [`b3ed4f7f776`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3ed4f7f776) - [ux] Fix for Hover Card unmount - added a clean up function that will clearTimeouts. Additionally changed the trigger of HoverCard from onMouseEnter to onMouseOver and added a function that after 100ms of hover starts fetching the data for the url to reduce the loading state experienced on standalone HoverCards.
+
 ## 26.5.16
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -18,6 +18,8 @@ var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardC
 var _styled = require("../styled");
 var _constants = require("../../../constants");
 var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
+var _actions = require("../../../state/actions");
+var _analytics = require("../../../state/analytics");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -26,7 +28,8 @@ var HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
     url = _ref.url,
-    id = _ref.id,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
     analyticsHandler = _ref.analyticsHandler,
     _ref$canOpen = _ref.canOpen,
     canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
@@ -37,17 +40,22 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$showServerAction = _ref.showServerActions,
     showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction;
   var delay = 300;
+  var resolveDelay = 100;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
   var fadeOutTimeoutId = (0, _react2.useRef)();
   var fadeInTimeoutId = (0, _react2.useRef)();
+  var resolveTimeOutId = (0, _react2.useRef)();
   var mousePos = (0, _react2.useRef)();
   var popupOffset = (0, _react2.useRef)();
   var parentSpan = (0, _react2.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
+  var analytics = (0, _analytics.useSmartLinkAnalytics)(url, undefined, id);
+  var _useSmartCardActions = (0, _actions.useSmartCardActions)(id, url, analytics),
+    loadMetadata = _useSmartCardActions.loadMetadata;
   var setMousePosition = (0, _react2.useCallback)(function (event) {
     if (isOpen) {
       return;
@@ -64,27 +72,61 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
+    if (resolveTimeOutId.current) {
+      clearTimeout(resolveTimeOutId.current);
+    }
     fadeOutTimeoutId.current = setTimeout(function () {
       return hideCard();
     }, delay);
   }, [hideCard]);
+
+  // clearing out the timeouts in order to avoid memory leaks
+  // in case the component unmounts before they execute
+  (0, _react2.useEffect)(function () {
+    return function () {
+      if (fadeOutTimeoutId.current) {
+        clearTimeout(fadeOutTimeoutId.current);
+      }
+      if (fadeInTimeoutId.current) {
+        clearTimeout(fadeInTimeoutId.current);
+      }
+      if (resolveTimeOutId.current) {
+        clearTimeout(resolveTimeOutId.current);
+      }
+    };
+  }, []);
+
+  // we want to initiate resolve a bit earlier for standalone cards
+  // to minimize the loading state
+  var initResolve = (0, _react2.useCallback)(function () {
+    // this check covers both non-SSR (status) & SSR case (metadataStatus)
+    var isLinkUnresolved = linkState.status === 'pending' || !linkState.metadataStatus;
+    if (!resolveTimeOutId.current && isLinkUnresolved) {
+      resolveTimeOutId.current = setTimeout(function () {
+        loadMetadata();
+      }, resolveDelay);
+    }
+  }, [linkState, loadMetadata]);
   var initShowCard = (0, _react2.useCallback)(function (event) {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
+    initResolve();
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
-    fadeInTimeoutId.current = setTimeout(function () {
-      //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-      if (parentSpan.current && mousePos.current) {
-        var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
-          bottom = _parentSpan$current$g.bottom,
-          left = _parentSpan$current$g.left;
-        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + _styled.CARD_GAP_PX];
-      }
-      setIsOpen(true);
-    }, delay);
-  }, [setMousePosition]);
+    if (!isOpen) {
+      fadeInTimeoutId.current = setTimeout(function () {
+        //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+        if (parentSpan.current && mousePos.current) {
+          var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
+            bottom = _parentSpan$current$g.bottom,
+            left = _parentSpan$current$g.left;
+          popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + _styled.CARD_GAP_PX];
+        }
+        setIsOpen(true);
+      }, delay);
+    }
+  }, [initResolve, isOpen, setMousePosition]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: _constants.CardDisplay.HoverCardPreview,
@@ -135,7 +177,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     return (0, _react.jsx)("span", {
       ref: parentSpan
     }, (0, _react.jsx)("span", (0, _extends2.default)({}, triggerProps, {
-      onMouseEnter: initShowCard,
+      onMouseOver: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
       onClick: onChildClick,

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

@@ -25,7 +25,6 @@ var _unauthorised = _interopRequireDefault(require("./views/unauthorised"));
 var _resolved = _interopRequireDefault(require("./views/resolved"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
-var _actions = require("../../../state/actions");
 var _click = require("../../../utils/analytics/click");
 var _store = require("../../../state/store");
 var _linkProvider = require("@atlaskit/link-provider");
@@ -91,7 +90,7 @@ var getCopyAction = function getCopyAction(url) {
 };
 exports.getCopyAction = getCopyAction;
 var HoverCardContent = function HoverCardContent(_ref) {
-  var _cardState$details;
+  var _linkState$status, _cardState$details;
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? '' : _ref$id,
     _analytics = _ref.analytics,
@@ -113,14 +112,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var extensionKey = (0, _react2.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
-  var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
   var linkState = (0, _store.useSmartCardState)(url);
-  var linkStatus = linkState.status;
+  var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var statusRef = (0, _react2.useRef)(linkStatus);
   var analyticsRef = (0, _react2.useRef)(analytics);
-  (0, _react2.useEffect)(function () {
-    actions.loadMetadata();
-  }, [actions]);
   (0, _react2.useEffect)(function () {
     /**
      * Must access current analytics object value via ref because its not stable

package/dist/es2019/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
@@ -10,11 +10,13 @@ import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
+import { useSmartCardActions } from '../../../state/actions';
+import { useSmartLinkAnalytics } from '../../../state/analytics';
 const HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 export const HoverCardComponent = ({
   children,
   url,
-  id,
+  id = '',
   analyticsHandler,
   canOpen = true,
   closeOnChildClick = false,
@@ -22,14 +24,20 @@ export const HoverCardComponent = ({
   showServerActions = false
 }) => {
   const delay = 300;
+  const resolveDelay = 100;
   const [isOpen, setIsOpen] = React.useState(false);
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
+  const resolveTimeOutId = useRef();
   const mousePos = useRef();
   const popupOffset = useRef();
   const parentSpan = useRef(null);
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
+  const analytics = useSmartLinkAnalytics(url, undefined, id);
+  const {
+    loadMetadata
+  } = useSmartCardActions(id, url, analytics);
   const setMousePosition = useCallback(event => {
     if (isOpen) {
       return;
@@ -46,26 +54,60 @@ export const HoverCardComponent = ({
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
+    if (resolveTimeOutId.current) {
+      clearTimeout(resolveTimeOutId.current);
+    }
     fadeOutTimeoutId.current = setTimeout(() => hideCard(), delay);
   }, [hideCard]);
+
+  // clearing out the timeouts in order to avoid memory leaks
+  // in case the component unmounts before they execute
+  useEffect(() => {
+    return () => {
+      if (fadeOutTimeoutId.current) {
+        clearTimeout(fadeOutTimeoutId.current);
+      }
+      if (fadeInTimeoutId.current) {
+        clearTimeout(fadeInTimeoutId.current);
+      }
+      if (resolveTimeOutId.current) {
+        clearTimeout(resolveTimeOutId.current);
+      }
+    };
+  }, []);
+
+  // we want to initiate resolve a bit earlier for standalone cards
+  // to minimize the loading state
+  const initResolve = useCallback(() => {
+    // this check covers both non-SSR (status) & SSR case (metadataStatus)
+    const isLinkUnresolved = linkState.status === 'pending' || !linkState.metadataStatus;
+    if (!resolveTimeOutId.current && isLinkUnresolved) {
+      resolveTimeOutId.current = setTimeout(() => {
+        loadMetadata();
+      }, resolveDelay);
+    }
+  }, [linkState, loadMetadata]);
   const initShowCard = useCallback(event => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
+    initResolve();
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
-    fadeInTimeoutId.current = setTimeout(() => {
-      //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-      if (parentSpan.current && mousePos.current) {
-        const {
-          bottom,
-          left
-        } = parentSpan.current.getBoundingClientRect();
-        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
-      }
-      setIsOpen(true);
-    }, delay);
-  }, [setMousePosition]);
+    if (!isOpen) {
+      fadeInTimeoutId.current = setTimeout(() => {
+        //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+        if (parentSpan.current && mousePos.current) {
+          const {
+            bottom,
+            left
+          } = parentSpan.current.getBoundingClientRect();
+          popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+        }
+        setIsOpen(true);
+      }, delay);
+    }
+  }, [initResolve, isOpen, setMousePosition]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: CardDisplay.HoverCardPreview,
@@ -114,7 +156,7 @@ export const HoverCardComponent = ({
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {
-    onMouseEnter: initShowCard,
+    onMouseOver: initShowCard,
     onMouseLeave: initHideCard,
     onMouseMove: setMousePosition,
     onClick: onChildClick,

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

@@ -16,7 +16,6 @@ import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
-import { useSmartCardActions } from '../../../state/actions';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 import { useSmartCardState } from '../../../state/store';
 import { useFeatureFlag } from '@atlaskit/link-provider';
@@ -64,7 +63,7 @@ const HoverCardContent = ({
   onMouseLeave,
   showServerActions
 }) => {
-  var _cardState$details;
+  var _linkState$status, _cardState$details;
   const useLozengeAction = useFeatureFlag('useLozengeAction');
   const {
     createAnalyticsEvent
@@ -72,14 +71,10 @@ const HoverCardContent = ({
   const defaultAnalytics = useSmartLinkAnalytics(url, undefined, id);
   const analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
-  const actions = useSmartCardActions(id, url, analytics);
   const linkState = useSmartCardState(url);
-  const linkStatus = linkState.status;
+  const linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   const statusRef = useRef(linkStatus);
   const analyticsRef = useRef(analytics);
-  useEffect(() => {
-    actions.loadMetadata();
-  }, [actions]);
   useEffect(() => {
     /**
      * Must access current analytics object value via ref because its not stable

package/dist/esm/version.json

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

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
@@ -11,11 +11,14 @@ import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
+import { useSmartCardActions } from '../../../state/actions';
+import { useSmartLinkAnalytics } from '../../../state/analytics';
 var HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
     url = _ref.url,
-    id = _ref.id,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
     analyticsHandler = _ref.analyticsHandler,
     _ref$canOpen = _ref.canOpen,
     canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
@@ -26,17 +29,22 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$showServerAction = _ref.showServerActions,
     showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction;
   var delay = 300;
+  var resolveDelay = 100;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
+  var resolveTimeOutId = useRef();
   var mousePos = useRef();
   var popupOffset = useRef();
   var parentSpan = useRef(null);
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
+  var analytics = useSmartLinkAnalytics(url, undefined, id);
+  var _useSmartCardActions = useSmartCardActions(id, url, analytics),
+    loadMetadata = _useSmartCardActions.loadMetadata;
   var setMousePosition = useCallback(function (event) {
     if (isOpen) {
       return;
@@ -53,27 +61,61 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
+    if (resolveTimeOutId.current) {
+      clearTimeout(resolveTimeOutId.current);
+    }
     fadeOutTimeoutId.current = setTimeout(function () {
       return hideCard();
     }, delay);
   }, [hideCard]);
+
+  // clearing out the timeouts in order to avoid memory leaks
+  // in case the component unmounts before they execute
+  useEffect(function () {
+    return function () {
+      if (fadeOutTimeoutId.current) {
+        clearTimeout(fadeOutTimeoutId.current);
+      }
+      if (fadeInTimeoutId.current) {
+        clearTimeout(fadeInTimeoutId.current);
+      }
+      if (resolveTimeOutId.current) {
+        clearTimeout(resolveTimeOutId.current);
+      }
+    };
+  }, []);
+
+  // we want to initiate resolve a bit earlier for standalone cards
+  // to minimize the loading state
+  var initResolve = useCallback(function () {
+    // this check covers both non-SSR (status) & SSR case (metadataStatus)
+    var isLinkUnresolved = linkState.status === 'pending' || !linkState.metadataStatus;
+    if (!resolveTimeOutId.current && isLinkUnresolved) {
+      resolveTimeOutId.current = setTimeout(function () {
+        loadMetadata();
+      }, resolveDelay);
+    }
+  }, [linkState, loadMetadata]);
   var initShowCard = useCallback(function (event) {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
+    initResolve();
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
-    fadeInTimeoutId.current = setTimeout(function () {
-      //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-      if (parentSpan.current && mousePos.current) {
-        var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
-          bottom = _parentSpan$current$g.bottom,
-          left = _parentSpan$current$g.left;
-        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
-      }
-      setIsOpen(true);
-    }, delay);
-  }, [setMousePosition]);
+    if (!isOpen) {
+      fadeInTimeoutId.current = setTimeout(function () {
+        //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+        if (parentSpan.current && mousePos.current) {
+          var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
+            bottom = _parentSpan$current$g.bottom,
+            left = _parentSpan$current$g.left;
+          popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+        }
+        setIsOpen(true);
+      }, delay);
+    }
+  }, [initResolve, isOpen, setMousePosition]);
   var linkActions = useSmartLinkActions({
     url: url,
     appearance: CardDisplay.HoverCardPreview,
@@ -124,7 +166,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     return jsx("span", {
       ref: parentSpan
     }, jsx("span", _extends({}, triggerProps, {
-      onMouseEnter: initShowCard,
+      onMouseOver: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
       onClick: onChildClick,

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

@@ -18,7 +18,6 @@ import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
-import { useSmartCardActions } from '../../../state/actions';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 import { useSmartCardState } from '../../../state/store';
 import { useFeatureFlag } from '@atlaskit/link-provider';
@@ -77,7 +76,7 @@ export var getCopyAction = function getCopyAction(url) {
   };
 };
 var HoverCardContent = function HoverCardContent(_ref) {
-  var _cardState$details;
+  var _linkState$status, _cardState$details;
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? '' : _ref$id,
     _analytics = _ref.analytics,
@@ -99,14 +98,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
-  var actions = useSmartCardActions(id, url, analytics);
   var linkState = useSmartCardState(url);
-  var linkStatus = linkState.status;
+  var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var statusRef = useRef(linkStatus);
   var analyticsRef = useRef(analytics);
-  useEffect(function () {
-    actions.loadMetadata();
-  }, [actions]);
   useEffect(function () {
     /**
      * Must access current analytics object value via ref because its not stable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.5.16",
+  "version": "26.5.17",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"