@atlaskit/teams-public 0.36.2 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/teams-public
 
+## 0.37.0
+
+### Minor Changes
+
+- [#170230](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170230)
+  [`ad865e02e9ef7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad865e02e9ef7) -
+  [ux] NO-ISSUE Improve the icon experience by checking its loading state
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.36.2
 
 ### Patch Changes

package/dist/cjs/common/ui/container-icon/index.compiled.css

@@ -1,6 +1,6 @@
 
-._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
-._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bah1h6o{justify-content:center}
@@ -12,5 +12,6 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1u1b{height:34px}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
 ._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/cjs/common/ui/container-icon/index.js

@@ -14,28 +14,50 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _loomAvatar = require("../loom-avatar");
 var styles = {
-  linkIconWrapperMedium: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
-  linkIconWrapperSmall: "_2rko1hkb _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx"
+  linkIconWrapperMedium: "_2rkopd34 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  linkIconWrapperSmall: "_2rkogqwt _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  skeletonMedium: "_2rkopd34 _bfhkn82g _1bsb1u1b _4t3i1u1b",
+  skeletonSmall: "_2rkogqwt _bfhkn82g _1bsb1tcg _4t3i1tcg"
 };
-var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
-  var containerType = _ref.containerType,
-    title = _ref.title,
-    containerIcon = _ref.containerIcon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size;
+var IconSkeleton = function IconSkeleton(_ref) {
+  var size = _ref.size,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: size === 'medium' ? styles.skeletonMedium : styles.skeletonSmall,
+    testId: "container-icon-skeleton"
+  });
+};
+var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref2) {
+  var containerType = _ref2.containerType,
+    title = _ref2.title,
+    containerIcon = _ref2.containerIcon,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    _ref2$iconsLoading = _ref2.iconsLoading,
+    iconsLoading = _ref2$iconsLoading === void 0 ? false : _ref2$iconsLoading,
+    _ref2$iconHasLoaded = _ref2.iconHasLoaded,
+    iconHasLoaded = _ref2$iconHasLoaded === void 0 ? true : _ref2$iconHasLoaded;
+  var isMedium = size === 'medium';
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
       spaceName: title,
-      size: size === 'medium' ? 'large' : size
+      size: isMedium ? 'large' : size
     });
   }
-  if (containerType === 'WebLink' && !containerIcon) {
-    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      xcss: size === 'medium' ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
-    }, /*#__PURE__*/_react.default.createElement(_link.default, {
-      label: "",
-      testId: "linked-container-WebLink-icon"
-    }));
+  if (containerType === 'WebLink') {
+    if (iconsLoading || !iconHasLoaded) {
+      return /*#__PURE__*/_react.default.createElement(IconSkeleton, {
+        size: size
+      });
+    }
+    if (!containerIcon) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        xcss: isMedium ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
+      }, /*#__PURE__*/_react.default.createElement(_link.default, {
+        label: "",
+        testId: "linked-container-WebLink-icon"
+      }));
+    }
   }
   return /*#__PURE__*/_react.default.createElement(_avatar.default, {
     appearance: "square",

package/dist/cjs/controllers/hooks/use-team-links-and-containers/index.js

@@ -34,6 +34,8 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     webLinksLoading = _useTeamWebLinks2$.isLoading,
     webLinksError = _useTeamWebLinks2$.hasError,
     webLinksHasLoaded = _useTeamWebLinks2$.hasLoaded,
+    iconsLoading = _useTeamWebLinks2$.iconsLoading,
+    iconHasLoaded = _useTeamWebLinks2$.iconHasLoaded,
     _useTeamWebLinks2$2 = _useTeamWebLinks2[1],
     getTeamWebLinks = _useTeamWebLinks2$2.getTeamWebLinks,
     createTeamWebLink = _useTeamWebLinks2$2.createTeamWebLink,
@@ -160,6 +162,8 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     hasLoaded: containersHasLoaded && webLinksHasLoaded,
     teamLinks: allContainers,
     canAddMoreLink: canAddMoreLink,
+    iconsLoading: iconsLoading,
+    iconHasLoaded: iconHasLoaded,
     addTeamLink: addTeamLink,
     updateTeamLinkById: updateTeamLinkById,
     removeTeamLink: removeTeamLink

package/dist/cjs/controllers/hooks/use-team-web-links/index.js

@@ -23,7 +23,8 @@ var _initialState = {
   links: [],
   linkIcons: [],
   iconsLoading: false,
-  iconsError: false
+  iconsError: false,
+  iconHasLoaded: false
 };
 var actions = exports.actions = {
   getTeamWebLinks: function getTeamWebLinks(teamId) {
@@ -136,7 +137,8 @@ var actions = exports.actions = {
                 setState({
                   linkIcons: [].concat((0, _toConsumableArray2.default)(currentIcons), (0, _toConsumableArray2.default)(newIconData || [])),
                   iconsLoading: false,
-                  iconsError: false
+                  iconsError: false,
+                  iconHasLoaded: true
                 });
               }
               _context2.next = 18;
@@ -147,7 +149,8 @@ var actions = exports.actions = {
               if (getState().teamId === teamId) {
                 setState({
                   iconsLoading: false,
-                  iconsError: true
+                  iconsError: true,
+                  iconHasLoaded: true
                 });
               }
             case 18:
@@ -156,7 +159,8 @@ var actions = exports.actions = {
             case 20:
               setState({
                 iconsLoading: false,
-                iconsError: false
+                iconsError: false,
+                iconHasLoaded: true
               });
             case 21:
             case "end":

package/dist/cjs/ui/team-containers/add-container-card/index.js

@@ -76,7 +76,7 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
       e.stopPropagation();
     }
   })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
-    space: "space.025"
+    space: 'space.025'
   } : {}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     maxLines: 1,
     weight: "medium",

package/dist/cjs/ui/team-containers/linked-container-card/index.js

@@ -140,7 +140,7 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
     space: "space.100",
     xcss: styles.card
   }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
-    space: "space.025"
+    space: 'space.025'
   } : {}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     maxLines: 1,
     weight: "medium",

package/dist/cjs/ui/team-containers/main.js

@@ -53,7 +53,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     unlinkError = _useTeamContainers.unlinkError;
   var _useTeamLinksAndConta = (0, _useTeamLinksAndContainers.useTeamLinksAndContainers)(teamId, true),
     teamLinks = _useTeamLinksAndConta.teamLinks,
-    removeTeamLink = _useTeamLinksAndConta.removeTeamLink;
+    removeTeamLink = _useTeamLinksAndConta.removeTeamLink,
+    iconsLoading = _useTeamLinksAndConta.iconsLoading,
+    iconHasLoaded = _useTeamLinksAndConta.iconHasLoaded;
   var _useTeamContainersHoo = (0, _useTeamContainers2.useTeamContainersHook)(),
     _useTeamContainersHoo2 = (0, _slicedToArray2.default)(_useTeamContainersHoo, 2),
     _ = _useTeamContainersHoo2[0],
@@ -241,6 +243,8 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
       containerId: container.id,
+      iconsLoading: iconsLoading,
+      iconHasLoaded: iconHasLoaded,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return handleOpenDisconnectDialog({
           containerId: container.id,
@@ -298,6 +302,8 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       containerId: container.id,
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
+      iconsLoading: iconsLoading,
+      iconHasLoaded: iconHasLoaded,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return handleOpenDisconnectDialog({
           containerId: container.id,

package/dist/cjs/ui/team-containers/team-link-card/index.js

@@ -44,7 +44,9 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
     containerId = _ref.containerId,
     containerTypeProperties = _ref.containerTypeProperties,
     onDisconnectButtonClick = _ref.onDisconnectButtonClick,
-    onEditLinkClick = _ref.onEditLinkClick;
+    onEditLinkClick = _ref.onEditLinkClick,
+    iconsLoading = _ref.iconsLoading,
+    iconHasLoaded = _ref.iconHasLoaded;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
@@ -113,7 +115,9 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
     containerType: containerType,
     title: title,
     containerIcon: containerIcon,
-    size: "medium"
+    size: "medium",
+    iconsLoading: iconsLoading,
+    iconHasLoaded: iconHasLoaded
   }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.linkableContent,
     testId: "team-link-card-linkable-content"

package/dist/es2019/common/ui/container-icon/index.compiled.css

@@ -1,6 +1,6 @@
 
-._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
-._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bah1h6o{justify-content:center}
@@ -12,5 +12,6 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1u1b{height:34px}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
 ._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/es2019/common/ui/container-icon/index.js

@@ -7,28 +7,49 @@ import LinkIcon from '@atlaskit/icon/core/link';
 import { Box } from '@atlaskit/primitives/compiled';
 import { LoomSpaceAvatar } from '../loom-avatar';
 const styles = {
-  linkIconWrapperMedium: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
-  linkIconWrapperSmall: "_2rko1hkb _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx"
+  linkIconWrapperMedium: "_2rkopd34 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  linkIconWrapperSmall: "_2rkogqwt _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  skeletonMedium: "_2rkopd34 _bfhkn82g _1bsb1u1b _4t3i1u1b",
+  skeletonSmall: "_2rkogqwt _bfhkn82g _1bsb1tcg _4t3i1tcg"
+};
+const IconSkeleton = ({
+  size,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: size === 'medium' ? styles.skeletonMedium : styles.skeletonSmall,
+    testId: "container-icon-skeleton"
+  });
 };
 export const ContainerIcon = ({
   containerType,
   title,
   containerIcon,
-  size = 'medium'
+  size = 'medium',
+  iconsLoading = false,
+  iconHasLoaded = true
 }) => {
+  const isMedium = size === 'medium';
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
       spaceName: title,
-      size: size === 'medium' ? 'large' : size
+      size: isMedium ? 'large' : size
     });
   }
-  if (containerType === 'WebLink' && !containerIcon) {
-    return /*#__PURE__*/React.createElement(Box, {
-      xcss: size === 'medium' ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
-    }, /*#__PURE__*/React.createElement(LinkIcon, {
-      label: "",
-      testId: "linked-container-WebLink-icon"
-    }));
+  if (containerType === 'WebLink') {
+    if (iconsLoading || !iconHasLoaded) {
+      return /*#__PURE__*/React.createElement(IconSkeleton, {
+        size: size
+      });
+    }
+    if (!containerIcon) {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: isMedium ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
+      }, /*#__PURE__*/React.createElement(LinkIcon, {
+        label: "",
+        testId: "linked-container-WebLink-icon"
+      }));
+    }
   }
   return /*#__PURE__*/React.createElement(Avatar, {
     appearance: "square",

package/dist/es2019/controllers/hooks/use-team-links-and-containers/index.js

@@ -17,7 +17,9 @@ export const useTeamLinksAndContainers = (teamId, enableContainers = true) => {
     linkIcons,
     isLoading: webLinksLoading,
     hasError: webLinksError,
-    hasLoaded: webLinksHasLoaded
+    hasLoaded: webLinksHasLoaded,
+    iconsLoading,
+    iconHasLoaded
   }, {
     getTeamWebLinks,
     createTeamWebLink,
@@ -74,6 +76,8 @@ export const useTeamLinksAndContainers = (teamId, enableContainers = true) => {
     hasLoaded: containersHasLoaded && webLinksHasLoaded,
     teamLinks: allContainers,
     canAddMoreLink,
+    iconsLoading,
+    iconHasLoaded,
     addTeamLink,
     updateTeamLinkById,
     removeTeamLink

package/dist/es2019/controllers/hooks/use-team-web-links/index.js

@@ -10,7 +10,8 @@ const initialState = {
   links: [],
   linkIcons: [],
   iconsLoading: false,
-  iconsError: false
+  iconsError: false,
+  iconHasLoaded: false
 };
 export const actions = {
   getTeamWebLinks: teamId => async ({
@@ -86,21 +87,24 @@ export const actions = {
           setState({
             linkIcons: [...currentIcons, ...(newIconData || [])],
             iconsLoading: false,
-            iconsError: false
+            iconsError: false,
+            iconHasLoaded: true
           });
         }
       } catch (iconError) {
         if (getState().teamId === teamId) {
           setState({
             iconsLoading: false,
-            iconsError: true
+            iconsError: true,
+            iconHasLoaded: true
           });
         }
       }
     } else {
       setState({
         iconsLoading: false,
-        iconsError: false
+        iconsError: false,
+        iconHasLoaded: true
       });
     }
   },

package/dist/es2019/ui/team-containers/add-container-card/index.js

@@ -60,7 +60,7 @@ export const AddContainerCard = ({
       e.stopPropagation();
     }
   })), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
-    space: "space.025"
+    space: 'space.025'
   } : {}, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     weight: "medium",

package/dist/es2019/ui/team-containers/linked-container-card/index.js

@@ -128,7 +128,7 @@ export const LinkedContainerCard = ({
     space: "space.100",
     xcss: styles.card
   }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
-    space: "space.025"
+    space: 'space.025'
   } : {}, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     weight: "medium",

package/dist/es2019/ui/team-containers/main.js

@@ -43,7 +43,9 @@ export const TeamContainers = ({
   } = useTeamContainers(teamId);
   const {
     teamLinks,
-    removeTeamLink
+    removeTeamLink,
+    iconsLoading,
+    iconHasLoaded
   } = useTeamLinksAndContainers(teamId, true);
   const [_, actions] = useTeamContainersHook();
   const [showMore, setShowMore] = useState(false);
@@ -175,6 +177,8 @@ export const TeamContainers = ({
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
       containerId: container.id,
+      iconsLoading: iconsLoading,
+      iconHasLoaded: iconHasLoaded,
       onDisconnectButtonClick: () => handleOpenDisconnectDialog({
         containerId: container.id,
         containerType: container.type,
@@ -218,6 +222,8 @@ export const TeamContainers = ({
       containerId: container.id,
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
+      iconsLoading: iconsLoading,
+      iconHasLoaded: iconHasLoaded,
       onDisconnectButtonClick: () => handleOpenDisconnectDialog({
         containerId: container.id,
         containerType: container.type,

package/dist/es2019/ui/team-containers/team-link-card/index.js

@@ -32,7 +32,9 @@ export const TeamLinkCard = ({
   containerId,
   containerTypeProperties,
   onDisconnectButtonClick,
-  onEditLinkClick
+  onEditLinkClick,
+  iconsLoading,
+  iconHasLoaded
 }) => {
   const {
     createAnalyticsEvent
@@ -97,7 +99,9 @@ export const TeamLinkCard = ({
     containerType: containerType,
     title: title,
     containerIcon: containerIcon,
-    size: "medium"
+    size: "medium",
+    iconsLoading: iconsLoading,
+    iconHasLoaded: iconHasLoaded
   }), /*#__PURE__*/React.createElement(Box, {
     xcss: styles.linkableContent,
     testId: "team-link-card-linkable-content"

package/dist/esm/common/ui/container-icon/index.compiled.css

@@ -1,6 +1,6 @@
 
-._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
-._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bah1h6o{justify-content:center}
@@ -12,5 +12,6 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1u1b{height:34px}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
 ._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/esm/common/ui/container-icon/index.js

@@ -7,28 +7,50 @@ import LinkIcon from '@atlaskit/icon/core/link';
 import { Box } from '@atlaskit/primitives/compiled';
 import { LoomSpaceAvatar } from '../loom-avatar';
 var styles = {
-  linkIconWrapperMedium: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
-  linkIconWrapperSmall: "_2rko1hkb _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx"
+  linkIconWrapperMedium: "_2rkopd34 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  linkIconWrapperSmall: "_2rkogqwt _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  skeletonMedium: "_2rkopd34 _bfhkn82g _1bsb1u1b _4t3i1u1b",
+  skeletonSmall: "_2rkogqwt _bfhkn82g _1bsb1tcg _4t3i1tcg"
 };
-export var ContainerIcon = function ContainerIcon(_ref) {
-  var containerType = _ref.containerType,
-    title = _ref.title,
-    containerIcon = _ref.containerIcon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size;
+var IconSkeleton = function IconSkeleton(_ref) {
+  var size = _ref.size,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: size === 'medium' ? styles.skeletonMedium : styles.skeletonSmall,
+    testId: "container-icon-skeleton"
+  });
+};
+export var ContainerIcon = function ContainerIcon(_ref2) {
+  var containerType = _ref2.containerType,
+    title = _ref2.title,
+    containerIcon = _ref2.containerIcon,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    _ref2$iconsLoading = _ref2.iconsLoading,
+    iconsLoading = _ref2$iconsLoading === void 0 ? false : _ref2$iconsLoading,
+    _ref2$iconHasLoaded = _ref2.iconHasLoaded,
+    iconHasLoaded = _ref2$iconHasLoaded === void 0 ? true : _ref2$iconHasLoaded;
+  var isMedium = size === 'medium';
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
       spaceName: title,
-      size: size === 'medium' ? 'large' : size
+      size: isMedium ? 'large' : size
     });
   }
-  if (containerType === 'WebLink' && !containerIcon) {
-    return /*#__PURE__*/React.createElement(Box, {
-      xcss: size === 'medium' ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
-    }, /*#__PURE__*/React.createElement(LinkIcon, {
-      label: "",
-      testId: "linked-container-WebLink-icon"
-    }));
+  if (containerType === 'WebLink') {
+    if (iconsLoading || !iconHasLoaded) {
+      return /*#__PURE__*/React.createElement(IconSkeleton, {
+        size: size
+      });
+    }
+    if (!containerIcon) {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: isMedium ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
+      }, /*#__PURE__*/React.createElement(LinkIcon, {
+        label: "",
+        testId: "linked-container-WebLink-icon"
+      }));
+    }
   }
   return /*#__PURE__*/React.createElement(Avatar, {
     appearance: "square",

package/dist/esm/controllers/hooks/use-team-links-and-containers/index.js

@@ -27,6 +27,8 @@ export var useTeamLinksAndContainers = function useTeamLinksAndContainers(teamId
     webLinksLoading = _useTeamWebLinks2$.isLoading,
     webLinksError = _useTeamWebLinks2$.hasError,
     webLinksHasLoaded = _useTeamWebLinks2$.hasLoaded,
+    iconsLoading = _useTeamWebLinks2$.iconsLoading,
+    iconHasLoaded = _useTeamWebLinks2$.iconHasLoaded,
     _useTeamWebLinks2$2 = _useTeamWebLinks2[1],
     getTeamWebLinks = _useTeamWebLinks2$2.getTeamWebLinks,
     createTeamWebLink = _useTeamWebLinks2$2.createTeamWebLink,
@@ -153,6 +155,8 @@ export var useTeamLinksAndContainers = function useTeamLinksAndContainers(teamId
     hasLoaded: containersHasLoaded && webLinksHasLoaded,
     teamLinks: allContainers,
     canAddMoreLink: canAddMoreLink,
+    iconsLoading: iconsLoading,
+    iconHasLoaded: iconHasLoaded,
     addTeamLink: addTeamLink,
     updateTeamLinkById: updateTeamLinkById,
     removeTeamLink: removeTeamLink

package/dist/esm/controllers/hooks/use-team-web-links/index.js

@@ -16,7 +16,8 @@ var _initialState = {
   links: [],
   linkIcons: [],
   iconsLoading: false,
-  iconsError: false
+  iconsError: false,
+  iconHasLoaded: false
 };
 export var actions = {
   getTeamWebLinks: function getTeamWebLinks(teamId) {
@@ -129,7 +130,8 @@ export var actions = {
                 setState({
                   linkIcons: [].concat(_toConsumableArray(currentIcons), _toConsumableArray(newIconData || [])),
                   iconsLoading: false,
-                  iconsError: false
+                  iconsError: false,
+                  iconHasLoaded: true
                 });
               }
               _context2.next = 18;
@@ -140,7 +142,8 @@ export var actions = {
               if (getState().teamId === teamId) {
                 setState({
                   iconsLoading: false,
-                  iconsError: true
+                  iconsError: true,
+                  iconHasLoaded: true
                 });
               }
             case 18:
@@ -149,7 +152,8 @@ export var actions = {
             case 20:
               setState({
                 iconsLoading: false,
-                iconsError: false
+                iconsError: false,
+                iconHasLoaded: true
               });
             case 21:
             case "end":

package/dist/esm/ui/team-containers/add-container-card/index.js

@@ -67,7 +67,7 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
       e.stopPropagation();
     }
   })), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
-    space: "space.025"
+    space: 'space.025'
   } : {}, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     weight: "medium",

package/dist/esm/ui/team-containers/linked-container-card/index.js

@@ -131,7 +131,7 @@ export var LinkedContainerCard = function LinkedContainerCard(_ref2) {
     space: "space.100",
     xcss: styles.card
   }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
-    space: "space.025"
+    space: 'space.025'
   } : {}, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     weight: "medium",

package/dist/esm/ui/team-containers/main.js

@@ -44,7 +44,9 @@ export var TeamContainers = function TeamContainers(_ref) {
     unlinkError = _useTeamContainers.unlinkError;
   var _useTeamLinksAndConta = useTeamLinksAndContainers(teamId, true),
     teamLinks = _useTeamLinksAndConta.teamLinks,
-    removeTeamLink = _useTeamLinksAndConta.removeTeamLink;
+    removeTeamLink = _useTeamLinksAndConta.removeTeamLink,
+    iconsLoading = _useTeamLinksAndConta.iconsLoading,
+    iconHasLoaded = _useTeamLinksAndConta.iconHasLoaded;
   var _useTeamContainersHoo = useTeamContainersHook(),
     _useTeamContainersHoo2 = _slicedToArray(_useTeamContainersHoo, 2),
     _ = _useTeamContainersHoo2[0],
@@ -232,6 +234,8 @@ export var TeamContainers = function TeamContainers(_ref) {
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
       containerId: container.id,
+      iconsLoading: iconsLoading,
+      iconHasLoaded: iconHasLoaded,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return handleOpenDisconnectDialog({
           containerId: container.id,
@@ -289,6 +293,8 @@ export var TeamContainers = function TeamContainers(_ref) {
       containerId: container.id,
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
+      iconsLoading: iconsLoading,
+      iconHasLoaded: iconHasLoaded,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return handleOpenDisconnectDialog({
           containerId: container.id,

package/dist/esm/ui/team-containers/team-link-card/index.js

@@ -35,7 +35,9 @@ export var TeamLinkCard = function TeamLinkCard(_ref) {
     containerId = _ref.containerId,
     containerTypeProperties = _ref.containerTypeProperties,
     onDisconnectButtonClick = _ref.onDisconnectButtonClick,
-    onEditLinkClick = _ref.onEditLinkClick;
+    onEditLinkClick = _ref.onEditLinkClick,
+    iconsLoading = _ref.iconsLoading,
+    iconHasLoaded = _ref.iconHasLoaded;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _getContainerProperti = getContainerProperties({
@@ -104,7 +106,9 @@ export var TeamLinkCard = function TeamLinkCard(_ref) {
     containerType: containerType,
     title: title,
     containerIcon: containerIcon,
-    size: "medium"
+    size: "medium",
+    iconsLoading: iconsLoading,
+    iconHasLoaded: iconHasLoaded
   }), /*#__PURE__*/React.createElement(Box, {
     xcss: styles.linkableContent,
     testId: "team-link-card-linkable-content"

package/dist/types/common/ui/container-icon/index.d.ts

@@ -6,5 +6,7 @@ export interface ContainerIconProps {
     containerIcon?: string;
     size?: 'small' | 'medium';
     testId?: string;
+    iconsLoading?: boolean;
+    iconHasLoaded?: boolean;
 }
-export declare const ContainerIcon: ({ containerType, title, containerIcon, size, }: ContainerIconProps) => React.JSX.Element;
+export declare const ContainerIcon: ({ containerType, title, containerIcon, size, iconsLoading, iconHasLoaded, }: ContainerIconProps) => React.JSX.Element;

package/dist/types/controllers/hooks/use-team-links-and-containers/index.d.ts

@@ -9,6 +9,8 @@ export type UseTeamLinksAndContainersResult = {
     hasLoaded: boolean;
     teamLinks: TeamContainer[];
     canAddMoreLink: boolean;
+    iconsLoading: boolean;
+    iconHasLoaded: boolean;
     addTeamLink: (containerOrWebLink: TeamContainer | NewTeamWebLink) => Promise<any>;
     updateTeamLinkById: (linkId: string, updatedFields: Partial<NewTeamWebLink>) => Promise<any>;
     removeTeamLink: (container: TeamContainer) => Promise<void>;

package/dist/types/controllers/hooks/use-team-web-links/types.d.ts

@@ -16,5 +16,6 @@ export interface TeamWebLinksState {
     linkIcons: TeamLinkIconData[];
     iconsLoading: boolean;
     iconsError: boolean;
+    iconHasLoaded: boolean;
 }
 export type StoreApi = StoreActionApi<TeamWebLinksState>;

package/dist/types/ui/team-containers/team-link-card/index.d.ts

@@ -12,5 +12,7 @@ export interface TeamLinkCardProps {
         subType?: ContainerSubTypes;
         name?: string;
     };
+    iconsLoading?: boolean;
+    iconHasLoaded?: boolean;
 }
-export declare const TeamLinkCard: ({ containerType, title, containerIcon, link, containerId, containerTypeProperties, onDisconnectButtonClick, onEditLinkClick, }: TeamLinkCardProps) => React.JSX.Element;
+export declare const TeamLinkCard: ({ containerType, title, containerIcon, link, containerId, containerTypeProperties, onDisconnectButtonClick, onEditLinkClick, iconsLoading, iconHasLoaded, }: TeamLinkCardProps) => React.JSX.Element;

package/dist/types-ts4.5/common/ui/container-icon/index.d.ts

@@ -6,5 +6,7 @@ export interface ContainerIconProps {
     containerIcon?: string;
     size?: 'small' | 'medium';
     testId?: string;
+    iconsLoading?: boolean;
+    iconHasLoaded?: boolean;
 }
-export declare const ContainerIcon: ({ containerType, title, containerIcon, size, }: ContainerIconProps) => React.JSX.Element;
+export declare const ContainerIcon: ({ containerType, title, containerIcon, size, iconsLoading, iconHasLoaded, }: ContainerIconProps) => React.JSX.Element;

package/dist/types-ts4.5/controllers/hooks/use-team-links-and-containers/index.d.ts

@@ -9,6 +9,8 @@ export type UseTeamLinksAndContainersResult = {
     hasLoaded: boolean;
     teamLinks: TeamContainer[];
     canAddMoreLink: boolean;
+    iconsLoading: boolean;
+    iconHasLoaded: boolean;
     addTeamLink: (containerOrWebLink: TeamContainer | NewTeamWebLink) => Promise<any>;
     updateTeamLinkById: (linkId: string, updatedFields: Partial<NewTeamWebLink>) => Promise<any>;
     removeTeamLink: (container: TeamContainer) => Promise<void>;

package/dist/types-ts4.5/controllers/hooks/use-team-web-links/types.d.ts

@@ -16,5 +16,6 @@ export interface TeamWebLinksState {
     linkIcons: TeamLinkIconData[];
     iconsLoading: boolean;
     iconsError: boolean;
+    iconHasLoaded: boolean;
 }
 export type StoreApi = StoreActionApi<TeamWebLinksState>;

package/dist/types-ts4.5/ui/team-containers/team-link-card/index.d.ts

@@ -12,5 +12,7 @@ export interface TeamLinkCardProps {
         subType?: ContainerSubTypes;
         name?: string;
     };
+    iconsLoading?: boolean;
+    iconHasLoaded?: boolean;
 }
-export declare const TeamLinkCard: ({ containerType, title, containerIcon, link, containerId, containerTypeProperties, onDisconnectButtonClick, onEditLinkClick, }: TeamLinkCardProps) => React.JSX.Element;
+export declare const TeamLinkCard: ({ containerType, title, containerIcon, link, containerId, containerTypeProperties, onDisconnectButtonClick, onEditLinkClick, iconsLoading, iconHasLoaded, }: TeamLinkCardProps) => React.JSX.Element;

package/package.json

@@ -47,7 +47,7 @@
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/teams-client": "^4.5.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tokens": "^5.2.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
@@ -113,7 +113,7 @@
 		}
 	},
 	"name": "@atlaskit/teams-public",
-	"version": "0.36.2",
+	"version": "0.37.0",
 	"description": "Public components related to teams",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",