@atlaskit/profilecard 23.6.7 → 23.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/profilecard
 
+## 23.7.0
+
+### Minor Changes
+
+- [#131460](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131460)
+  [`c890581942f6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c890581942f6e) -
+  [ux] Add loading skeleton for team containers in profile card
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.6.7
 
 ### Patch Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.6.7");
+  headers.append('atl-client-version', "23.7.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.6.7");
+  headers.append('atl-client-version', "23.7.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/team-profile-card/main.js

@@ -18,6 +18,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var _teamsPublic = require("@atlaskit/teams-public");
 var _main = require("./team-connections/main");
+var _teamContainersSkeleton = require("./team-containers-skeleton");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var noop = function noop() {};
@@ -27,7 +28,8 @@ var styles = {
   avatarImageStyles: "_kqswstnw _18u01ejb",
   headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
   teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
-  teamConnectionStyles: "_18u01ejb _19pkpxbi _2hwx1ejb _c71lx2si _18m91wug",
+  teamConnectionHeaderStyles: "_18u01ejb _19pkpxbi _2hwx1ejb _c71lx2si _18m91wug",
+  teamConnectionContainerStyles: "_18u01ejb _2hwx1ejb",
   viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
   viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _syaz1gjq _1bsb1osq _4t3i1ul9 _19pkpxbi"
 };
@@ -63,7 +65,8 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     isVerified = _ref3.isVerified,
     teamProfileUrl = _ref3.teamProfileUrl;
   var _useTeamContainers = (0, _teamsPublic.useTeamContainers)(teamId),
-    teamContainers = _useTeamContainers.teamContainers;
+    teamContainers = _useTeamContainers.teamContainers,
+    loading = _useTeamContainers.loading;
   // Ensure that the current container is not the only connection for this team before showing the "Where we work" section
   var hasOtherTeamConnections = (0, _react.useMemo)(function () {
     return teamContainers.filter(function (tc) {
@@ -110,10 +113,10 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
   })), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text",
     maxLines: 3
-  }, description)), hasOtherTeamConnections && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    xcss: styles.teamConnectionStyles,
-    space: "space.200"
-  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+  }, description)), (loading || hasOtherTeamConnections) && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: 'space.200',
+    xcss: hasOtherTeamConnections ? styles.teamConnectionHeaderStyles : styles.teamConnectionContainerStyles
+  }, hasOtherTeamConnections && /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "xxsmall"
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
     defaultMessage: "Where we work",
@@ -124,7 +127,8 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     userId: userId,
     cloudId: cloudId,
     components: {
-      ContainerCard: _main.TeamConnections
+      ContainerCard: _main.TeamConnections,
+      TeamContainersSkeleton: _teamContainersSkeleton.TeamContainersSkeleton
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true

package/dist/cjs/components/team-profile-card/team-containers-skeleton/index.compiled.css

@@ -0,0 +1,3 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}

package/dist/cjs/components/team-profile-card/team-containers-skeleton/index.js

@@ -0,0 +1,33 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TeamContainersSkeleton = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _linkedContainerCardSkeleton = require("./linked-container-card-skeleton");
+var styles = {
+  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk"
+};
+var TeamContainersSkeleton = exports.TeamContainersSkeleton = function TeamContainersSkeleton(_ref) {
+  var numberOfContainers = _ref.numberOfContainers;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.200",
+    testId: "profile-card-team-containers-skeleton"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.100"
+  }, (0, _toConsumableArray2.default)(Array(numberOfContainers)).map(function (_, index) {
+    return /*#__PURE__*/_react.default.createElement(_linkedContainerCardSkeleton.LinkedContainerCardSkeleton, {
+      key: index
+    });
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.showMoreButtonSkeleton
+  }));
+};

package/dist/cjs/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.compiled.css

@@ -0,0 +1,17 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bsb1tcg{width:24px}
+._1bsb7vkz{width:1pc}
+._1bsbqkoa{width:9pc}
+._1qu2nqa1{outline-style:solid}
+._4t3i1tcg{height:24px}
+._4t3i7vkz{height:1pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/cjs/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.js

@@ -0,0 +1,40 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkedContainerCardSkeleton = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  containerWrapperSkeleton: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _syaz1fxt _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  containerIconSkeleton: "_2rkoiti9 _4t3i1tcg _1bsb1tcg _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  firstLineSkeleton: "_2rko1q77 _1rjc1b66",
+  secondLineSkeleton: "_2rko1q77 _1rjc1b66 _1bsbqkoa",
+  containerTypeIconSkeleton: "_2rkoiti9 _4t3i7vkz _1bsb7vkz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+};
+var LinkedContainerCardSkeleton = exports.LinkedContainerCardSkeleton = function LinkedContainerCardSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.containerWrapperSkeleton
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.containerIconSkeleton,
+    backgroundColor: "color.background.neutral"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    grow: "fill",
+    space: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.firstLineSkeleton,
+    backgroundColor: "color.background.neutral"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.secondLineSkeleton,
+    backgroundColor: "color.background.neutral"
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.containerTypeIconSkeleton,
+    backgroundColor: "color.background.neutral"
+  }));
+};

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.6.7"
+      packageVersion: "23.7.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.6.7");
+  headers.append('atl-client-version', "23.7.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.6.7");
+  headers.append('atl-client-version', "23.7.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/team-profile-card/main.js

@@ -10,6 +10,7 @@ import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compil
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
 import { TeamConnections } from './team-connections/main';
+import { TeamContainersSkeleton } from './team-containers-skeleton';
 const noop = () => {};
 const styles = {
   wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb1gwv _1ul95x59 _4t3i1wug",
@@ -17,7 +18,8 @@ const styles = {
   avatarImageStyles: "_kqswstnw _18u01ejb",
   headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
   teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
-  teamConnectionStyles: "_18u01ejb _19pkpxbi _2hwx1ejb _c71lx2si _18m91wug",
+  teamConnectionHeaderStyles: "_18u01ejb _19pkpxbi _2hwx1ejb _c71lx2si _18m91wug",
+  teamConnectionContainerStyles: "_18u01ejb _2hwx1ejb",
   viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
   viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _syaz1gjq _1bsb1osq _4t3i1ul9 _19pkpxbi"
 };
@@ -52,7 +54,8 @@ export const TeamProfileCard = ({
   teamProfileUrl
 }) => {
   const {
-    teamContainers
+    teamContainers,
+    loading
   } = useTeamContainers(teamId);
   // Ensure that the current container is not the only connection for this team before showing the "Where we work" section
   const hasOtherTeamConnections = useMemo(() => teamContainers.filter(tc => tc.id === containerId).length < teamContainers.length, [containerId, teamContainers]);
@@ -96,10 +99,10 @@ export const TeamProfileCard = ({
   })), description && /*#__PURE__*/React.createElement(Text, {
     color: "color.text",
     maxLines: 3
-  }, description)), hasOtherTeamConnections && /*#__PURE__*/React.createElement(Stack, {
-    xcss: styles.teamConnectionStyles,
-    space: "space.200"
-  }, /*#__PURE__*/React.createElement(Heading, {
+  }, description)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(Stack, {
+    space: 'space.200',
+    xcss: hasOtherTeamConnections ? styles.teamConnectionHeaderStyles : styles.teamConnectionContainerStyles
+  }, hasOtherTeamConnections && /*#__PURE__*/React.createElement(Heading, {
     size: "xxsmall"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     defaultMessage: "Where we work",
@@ -110,7 +113,8 @@ export const TeamProfileCard = ({
     userId: userId,
     cloudId: cloudId,
     components: {
-      ContainerCard: TeamConnections
+      ContainerCard: TeamConnections,
+      TeamContainersSkeleton: TeamContainersSkeleton
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true

package/dist/es2019/components/team-profile-card/team-containers-skeleton/index.compiled.css

@@ -0,0 +1,3 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}

package/dist/es2019/components/team-profile-card/team-containers-skeleton/index.js

@@ -0,0 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
+import { LinkedContainerCardSkeleton } from './linked-container-card-skeleton';
+const styles = {
+  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk"
+};
+export const TeamContainersSkeleton = ({
+  numberOfContainers
+}) => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.200",
+    testId: "profile-card-team-containers-skeleton"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100"
+  }, [...Array(numberOfContainers)].map((_, index) => /*#__PURE__*/React.createElement(LinkedContainerCardSkeleton, {
+    key: index
+  }))), /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.showMoreButtonSkeleton
+  }));
+};

package/dist/es2019/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.compiled.css

@@ -0,0 +1,17 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bsb1tcg{width:24px}
+._1bsb7vkz{width:1pc}
+._1bsbqkoa{width:9pc}
+._1qu2nqa1{outline-style:solid}
+._4t3i1tcg{height:24px}
+._4t3i7vkz{height:1pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.js

@@ -0,0 +1,33 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
+const styles = {
+  containerWrapperSkeleton: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _syaz1fxt _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  containerIconSkeleton: "_2rkoiti9 _4t3i1tcg _1bsb1tcg _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  firstLineSkeleton: "_2rko1q77 _1rjc1b66",
+  secondLineSkeleton: "_2rko1q77 _1rjc1b66 _1bsbqkoa",
+  containerTypeIconSkeleton: "_2rkoiti9 _4t3i7vkz _1bsb7vkz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+};
+export const LinkedContainerCardSkeleton = () => {
+  return /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    xcss: styles.containerWrapperSkeleton
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.containerIconSkeleton,
+    backgroundColor: "color.background.neutral"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    grow: "fill",
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.firstLineSkeleton,
+    backgroundColor: "color.background.neutral"
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.secondLineSkeleton,
+    backgroundColor: "color.background.neutral"
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.containerTypeIconSkeleton,
+    backgroundColor: "color.background.neutral"
+  }));
+};

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.6.7",
+    packageVersion: "23.7.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.6.7");
+  headers.append('atl-client-version', "23.7.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.6.7");
+  headers.append('atl-client-version', "23.7.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/team-profile-card/main.js

@@ -10,6 +10,7 @@ import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compil
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
 import { TeamConnections } from './team-connections/main';
+import { TeamContainersSkeleton } from './team-containers-skeleton';
 var noop = function noop() {};
 var styles = {
   wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb1gwv _1ul95x59 _4t3i1wug",
@@ -17,7 +18,8 @@ var styles = {
   avatarImageStyles: "_kqswstnw _18u01ejb",
   headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
   teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
-  teamConnectionStyles: "_18u01ejb _19pkpxbi _2hwx1ejb _c71lx2si _18m91wug",
+  teamConnectionHeaderStyles: "_18u01ejb _19pkpxbi _2hwx1ejb _c71lx2si _18m91wug",
+  teamConnectionContainerStyles: "_18u01ejb _2hwx1ejb",
   viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
   viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _syaz1gjq _1bsb1osq _4t3i1ul9 _19pkpxbi"
 };
@@ -53,7 +55,8 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
     isVerified = _ref3.isVerified,
     teamProfileUrl = _ref3.teamProfileUrl;
   var _useTeamContainers = useTeamContainers(teamId),
-    teamContainers = _useTeamContainers.teamContainers;
+    teamContainers = _useTeamContainers.teamContainers,
+    loading = _useTeamContainers.loading;
   // Ensure that the current container is not the only connection for this team before showing the "Where we work" section
   var hasOtherTeamConnections = useMemo(function () {
     return teamContainers.filter(function (tc) {
@@ -100,10 +103,10 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
   })), description && /*#__PURE__*/React.createElement(Text, {
     color: "color.text",
     maxLines: 3
-  }, description)), hasOtherTeamConnections && /*#__PURE__*/React.createElement(Stack, {
-    xcss: styles.teamConnectionStyles,
-    space: "space.200"
-  }, /*#__PURE__*/React.createElement(Heading, {
+  }, description)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(Stack, {
+    space: 'space.200',
+    xcss: hasOtherTeamConnections ? styles.teamConnectionHeaderStyles : styles.teamConnectionContainerStyles
+  }, hasOtherTeamConnections && /*#__PURE__*/React.createElement(Heading, {
     size: "xxsmall"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     defaultMessage: "Where we work",
@@ -114,7 +117,8 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
     userId: userId,
     cloudId: cloudId,
     components: {
-      ContainerCard: TeamConnections
+      ContainerCard: TeamConnections,
+      TeamContainersSkeleton: TeamContainersSkeleton
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true

package/dist/esm/components/team-profile-card/team-containers-skeleton/index.compiled.css

@@ -0,0 +1,3 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}

package/dist/esm/components/team-profile-card/team-containers-skeleton/index.js

@@ -0,0 +1,26 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
+import { LinkedContainerCardSkeleton } from './linked-container-card-skeleton';
+var styles = {
+  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk"
+};
+export var TeamContainersSkeleton = function TeamContainersSkeleton(_ref) {
+  var numberOfContainers = _ref.numberOfContainers;
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.200",
+    testId: "profile-card-team-containers-skeleton"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100"
+  }, _toConsumableArray(Array(numberOfContainers)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement(LinkedContainerCardSkeleton, {
+      key: index
+    });
+  })), /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.showMoreButtonSkeleton
+  }));
+};

package/dist/esm/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.compiled.css

@@ -0,0 +1,17 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bsb1tcg{width:24px}
+._1bsb7vkz{width:1pc}
+._1bsbqkoa{width:9pc}
+._1qu2nqa1{outline-style:solid}
+._4t3i1tcg{height:24px}
+._4t3i7vkz{height:1pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/esm/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.js

@@ -0,0 +1,33 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
+var styles = {
+  containerWrapperSkeleton: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _syaz1fxt _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  containerIconSkeleton: "_2rkoiti9 _4t3i1tcg _1bsb1tcg _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  firstLineSkeleton: "_2rko1q77 _1rjc1b66",
+  secondLineSkeleton: "_2rko1q77 _1rjc1b66 _1bsbqkoa",
+  containerTypeIconSkeleton: "_2rkoiti9 _4t3i7vkz _1bsb7vkz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+};
+export var LinkedContainerCardSkeleton = function LinkedContainerCardSkeleton() {
+  return /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    xcss: styles.containerWrapperSkeleton
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.containerIconSkeleton,
+    backgroundColor: "color.background.neutral"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    grow: "fill",
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.firstLineSkeleton,
+    backgroundColor: "color.background.neutral"
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.secondLineSkeleton,
+    backgroundColor: "color.background.neutral"
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.containerTypeIconSkeleton,
+    backgroundColor: "color.background.neutral"
+  }));
+};

package/dist/esm/util/analytics.js

@@ -39,7 +39,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.6.7"
+      packageVersion: "23.7.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/components/team-profile-card/team-containers-skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TeamContainersSkeletonProps } from '@atlaskit/teams-public';
+export declare const TeamContainersSkeleton: ({ numberOfContainers }: TeamContainersSkeletonProps) => React.JSX.Element;

package/dist/types/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LinkedContainerCardSkeleton: () => React.JSX.Element;

package/dist/types-ts4.5/components/team-profile-card/team-containers-skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TeamContainersSkeletonProps } from '@atlaskit/teams-public';
+export declare const TeamContainersSkeleton: ({ numberOfContainers }: TeamContainersSkeletonProps) => React.JSX.Element;

package/dist/types-ts4.5/components/team-profile-card/team-containers-skeleton/linked-container-card-skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LinkedContainerCardSkeleton: () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.6.7",
+	"version": "23.7.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -74,7 +74,7 @@
 		"@atlaskit/rovo-triggers": "^2.7.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/teams-avatar": "^2.3.0",
-		"@atlaskit/teams-public": "^0.21.0",
+		"@atlaskit/teams-public": "^0.22.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",