@atlaskit/smart-card 20.1.0 → 20.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 20.1.1
+
+### Patch Changes
+
+- [`59469f2ed1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59469f2ed1c) - Add loading state for hover previews
+
 ## 20.1.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -17,11 +17,13 @@ var _tokens = require("@atlaskit/tokens");
 
 var _templateObject, _templateObject2;
 
-var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
-
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
-  var testId = _ref.testId;
+  var testId = _ref.testId,
+      width = _ref.width,
+      height = _ref.height;
+  var animationWidth = width ? "".concat(width, "rem") : '20px';
+  var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return (0, _core.jsx)("span", {
     css: styles,
     "data-testid": testId

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

@@ -35,6 +35,8 @@ var _styled = require("../styled");
 
 var _utils2 = require("../utils");
 
+var _HoverCardLoadingView = _interopRequireDefault(require("./HoverCardLoadingView"));
+
 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; }
@@ -125,21 +127,33 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var body = data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, null) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: _styled.flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
+  var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: _styled.titleBlockCss,
     size: _constants.SmartLinkSize.Large,
     position: _constants.SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+  };
+  var flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: _styled.flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/_react.default.createElement(_HoverCardLoadingView.default, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, titleBlockProps), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: _constants.SmartLinkSize.Large,

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loadingSkeleton = _interopRequireDefault(require("../../FlexibleCard/components/common/loading-skeleton"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+
+var _blocks = require("../../FlexibleCard/components/blocks");
+
+var _styled = require("../styled");
+
+/** @jsx jsx */
+var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps;
+  var lineHeightRem = 1.25;
+  var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
+  return (0, _core.jsx)("div", {
+    css: _styled.loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, (0, _core.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _core.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _core.jsx)("div", {
+    css: _styled.skeletonContainer
+  }, (0, _core.jsx)("span", null), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+var _default = HoverCardLoadingView;
+exports.default = _default;

package/dist/cjs/view/HoverCard/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = void 0;
+exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,7 +15,7 @@ var _index = require("../../index");
 
 var _constants = require("../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var flexibleUiOptions = {
   hideElevation: true,
@@ -25,14 +25,20 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 exports.flexibleUiOptions = flexibleUiOptions;
+var CARD_WIDTH_REM = 24;
+exports.CARD_WIDTH_REM = CARD_WIDTH_REM;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
-var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
+var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
 var titleBlockCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 exports.titleBlockCss = titleBlockCss;
 var metadataBlockCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
 exports.metadataBlockCss = metadataBlockCss;
 var footerBlockCss = (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
-exports.footerBlockCss = footerBlockCss;
+exports.footerBlockCss = footerBlockCss;
+var loadingViewContainer = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.loadingViewContainer = loadingViewContainer;
+var skeletonContainer = (0, _core.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+exports.skeletonContainer = skeletonContainer;

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -2,38 +2,45 @@
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-const animationNameStyles = keyframes`
-  0% { background-position: -20px 0; }
-  100% { background-position: 20px 0; }
-`;
-const styles = css`
-  border-radius: 2px;
-  user-select: none;
-  background: ${token('color.skeleton.subtle', '#f6f7f8')};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
-  background-image: linear-gradient(
-    to right,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
-    ${token('color.skeleton', '#edeef1')} 20%,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
-    ${token('color.skeleton.subtle', '#f6f7f8')}100%
-  );
-  background-repeat: no-repeat;
-  background-size: 280% 100%;
-  display: inline-block;
-
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${animationNameStyles};
-  animation-timing-function: linear;
-`;
 
 const LoadingSkeleton = ({
-  testId
-}) => jsx("span", {
-  css: styles,
-  "data-testid": testId
-});
+  testId,
+  width,
+  height
+}) => {
+  const animationWidth = width ? `${width}rem` : '20px';
+  const animationNameStyles = keyframes`
+    0% { background-position: -${animationWidth}  0; }
+    100% { background-position: ${animationWidth} 0; }
+  `;
+  const styles = css`
+    width: ${width}rem;
+    height: ${height}rem;
+    border-radius: 2px;
+    user-select: none;
+    background: ${token('color.skeleton.subtle', '#f6f7f8')};
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
+    background-image: linear-gradient(
+      to right,
+      ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+      ${token('color.skeleton', '#edeef1')} 20%,
+      ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
+      ${token('color.skeleton.subtle', '#f6f7f8')}100%
+    );
+    background-repeat: no-repeat;
+    background-size: 280% 100%;
+    display: inline-block;
+
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: ${animationNameStyles};
+    animation-timing-function: linear;
+  `;
+  return jsx("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
 
 export default LoadingSkeleton;

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

@@ -11,6 +11,7 @@ import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import HoverCardLoadingView from './HoverCardLoadingView';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -79,21 +80,33 @@ const HoverCardContent = ({
   } = extractMetadata(getSimulatedMetadata(extensionKey, types));
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  const titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
     position: SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  };
+  const flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

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

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
+import FlexibleCard from '../../FlexibleCard';
+import { TitleBlock } from '../../FlexibleCard/components/blocks';
+import { CARD_WIDTH_REM, loadingViewContainer, skeletonContainer } from '../styled';
+
+const HoverCardLoadingView = ({
+  flexibleCardProps,
+  titleBlockProps
+}) => {
+  const lineHeightRem = 1.25;
+  const skeletonWidth = CARD_WIDTH_REM - 2;
+  return jsx("div", {
+    css: loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
+    css: skeletonContainer
+  }, jsx("span", null), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+export default HoverCardLoadingView;

package/dist/es2019/view/HoverCard/styled.js

@@ -8,6 +8,7 @@ export const flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
+export const CARD_WIDTH_REM = 24;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
 const separatorCss = css`
@@ -19,7 +20,7 @@ export const HoverCardContainer = css`
   background: none;
   border-width: 0;
   box-sizing: border-box;
-  width: 24rem;
+  width: ${CARD_WIDTH_REM}rem;
   padding: 1rem;
 
   .${loadingPlaceholderClassName} {
@@ -70,4 +71,14 @@ export const metadataBlockCss = css`
 `;
 export const footerBlockCss = css`
   padding-top: 0.25rem;
+`;
+export const loadingViewContainer = css`
+  display: flex;
+  flex-direction: column;
+`;
+export const skeletonContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  align-items: center;
 `;

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -6,11 +6,14 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
 
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
-  var testId = _ref.testId;
+  var testId = _ref.testId,
+      width = _ref.width,
+      height = _ref.height;
+  var animationWidth = width ? "".concat(width, "rem") : '20px';
+  var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return jsx("span", {
     css: styles,
     "data-testid": testId

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

@@ -11,6 +11,7 @@ import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import HoverCardLoadingView from './HoverCardLoadingView';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
@@ -92,21 +93,33 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
     position: SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  };
+  var flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
+import FlexibleCard from '../../FlexibleCard';
+import { TitleBlock } from '../../FlexibleCard/components/blocks';
+import { CARD_WIDTH_REM, loadingViewContainer, skeletonContainer } from '../styled';
+
+var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps;
+  var lineHeightRem = 1.25;
+  var skeletonWidth = CARD_WIDTH_REM - 2;
+  return jsx("div", {
+    css: loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
+    css: skeletonContainer
+  }, jsx("span", null), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+export default HoverCardLoadingView;

package/dist/esm/view/HoverCard/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
@@ -12,10 +12,13 @@ export var flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
+export var CARD_WIDTH_REM = 24;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
-export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 export var metadataBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
-export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var loadingViewContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));

package/dist/types/view/FlexibleCard/components/common/loading-skeleton/types.d.ts

@@ -5,4 +5,12 @@ export declare type LoadingSkeletonProps = {
      * code, serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * Width of the loading skeleton, defaults to width of the parent element
+     */
+    width?: number;
+    /**
+     * Height of loading skeleton, defaults to height of the parent element
+     */
+    height?: number;
 };

package/dist/types/view/HoverCard/components/HoverCardLoadingView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HoverCardLoadingViewProps } from '../types';
+declare const HoverCardLoadingView: React.FC<HoverCardLoadingViewProps>;
+export default HoverCardLoadingView;

package/dist/types/view/HoverCard/styled.d.ts

@@ -1,6 +1,9 @@
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 export declare const flexibleUiOptions: FlexibleUiOptions;
+export declare const CARD_WIDTH_REM = 24;
 export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const footerBlockCss: import("@emotion/utils").SerializedStyles;
+export declare const loadingViewContainer: import("@emotion/utils").SerializedStyles;
+export declare const skeletonContainer: import("@emotion/utils").SerializedStyles;

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

@@ -6,6 +6,8 @@ import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { AnalyticsHandler } from '../../utils/types';
 import { ReactElement } from 'react';
+import { TitleBlockProps } from '../FlexibleCard/components/blocks/title-block/types';
+import { FlexibleCardProps } from '../FlexibleCard/types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     id?: string;
     url: string;
@@ -32,3 +34,7 @@ export declare type HoverCardContentProps = {
     onResolve: () => void;
     url: string;
 };
+export declare type HoverCardLoadingViewProps = {
+    flexibleCardProps: FlexibleCardProps;
+    titleBlockProps: TitleBlockProps;
+};

package/package.json

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