@atlaskit/profilecard 16.12.1 → 17.0.0

package/dist/esm/components/User/ProfileCard.js

@@ -1,392 +1,210 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["text"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
-import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AnalyticsName } from '../../internal/analytics';
-import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
-import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, AppTitleLabel, CardContainer, CardContent, CardWrapper, CustomLozengeContainer, DetailsGroup, DisabledInfo, FullNameLabel, JobTitleLabel, KudosBlobAnimation, LozengeWrapper, ProfileImage, SpinnerContainer } from '../../styled/Card';
+import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
+import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
+import { getPageTime } from '../../util/performance';
 import { ErrorMessage } from '../Error';
-import { IconLabel } from '../Icon';
-import { OverflowProfileCardButtons } from './OverflowProfileCardButtons';
-import ReportingLinesDetails from './ReportingLinesDetails';
-
-var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Profilecard, _React$PureComponent);
-
-  var _super = _createSuper(Profilecard);
-
-  function Profilecard(props) {
-    var _this;
-
-    _classCallCheck(this, Profilecard);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "GIVE_KUDOS_ACTION_ID", 'give-kudos');
-
-    _defineProperty(_assertThisInitialized(_this), "durationSince", function (from) {
-      var fromParsed = from || 0;
-      return fromParsed > 0 ? Date.now() - fromParsed : null;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "callClientFetchProfile", function () {
-      if (_this.props.clientFetchProfile) {
-        var _this$props;
-
-        (_this$props = _this.props).clientFetchProfile.apply(_this$props, arguments);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "callAnalytics", function (id, options) {
-      if (_this.props.analytics) {
-        _this.props.analytics(id, options);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "kudosUrl", function () {
-      var recipientId = _this.props.userId && "&recipientId=".concat(_this.props.userId) || '';
-      var cloudId = _this.props.cloudId && "&cloudId=".concat(_this.props.cloudId) || '';
-      return "".concat(_this.props.teamCentralBaseUrl, "/kudos/give?type=individual").concat(recipientId).concat(cloudId);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "kudosButtonCallback", function () {
-      if (_this.props.openKudosDrawer) {
-        _this.props.openKudosDrawer();
-      } else {
-        window.open(_this.kudosUrl());
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderButton", function (action, idx) {
-      var isGiveKudosActionButton = action.id === _this.GIVE_KUDOS_ACTION_ID;
-      var actionButton = /*#__PURE__*/React.createElement(Button, {
-        appearance: "default",
-        key: action.id || idx,
-        onClick: function onClick(event) {
-          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            args[_key - 1] = arguments[_key];
-          }
-
-          return _this.onActionClick(action, args, event);
-        },
-        href: action.link
-      }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
-
-      if (isGiveKudosActionButton) {
-        return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, actionButton);
-      }
-
-      return actionButton;
-    });
-
-    _this.timeOpen = null;
-
-    _this.clientFetchProfile = function () {
-      var _this2;
-
-      _this.callAnalytics(AnalyticsName.PROFILE_CARD_RELOAD, {});
-
-      (_this2 = _this).callClientFetchProfile.apply(_this2, arguments);
-    };
-
-    return _this;
-  }
-
-  _createClass(Profilecard, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.timeOpen = Date.now();
-      this.callAnalytics(AnalyticsName.PROFILE_CARD_VIEW, {});
+import { ACTION_OVERFLOW_THRESHOLD, OverflowProfileCardButtons } from './OverflowProfileCardButtons';
+import { ProfileCardDetails } from './ProfileCardDetails';
+var GIVE_KUDOS_ACTION_ID = 'give-kudos';
+
+var useKudos = function useKudos(cloudId, userId, teamCentralBaseUrl, openKudosDrawer) {
+  var kudosUrl = useMemo(function () {
+    var recipientId = userId ? "&recipientId=".concat(userId) : '';
+    var cloudIdParam = cloudId ? "&cloudId=".concat(cloudId) : '';
+    return "".concat(teamCentralBaseUrl || '', "/kudos/give?type=individual").concat(recipientId).concat(cloudIdParam);
+  }, [cloudId, teamCentralBaseUrl, userId]);
+  var kudosButtonCallback = useCallback(function () {
+    if (openKudosDrawer) {
+      openKudosDrawer();
+    } else {
+      window.open(kudosUrl);
     }
-  }, {
-    key: "renderErrorMessage",
-    value: function renderErrorMessage() {
-      return /*#__PURE__*/React.createElement(ErrorMessage, {
-        reload: this.props.clientFetchProfile && this.clientFetchProfile,
-        errorType: this.props.errorType
-      });
+  }, [kudosUrl, openKudosDrawer]);
+  var kudosAction = useMemo(function () {
+    return {
+      label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
+      id: GIVE_KUDOS_ACTION_ID,
+      callback: kudosButtonCallback,
+      link: kudosUrl
+    };
+  }, [kudosButtonCallback, kudosUrl]);
+  return {
+    kudosAction: kudosAction,
+    kudosButtonCallback: kudosButtonCallback,
+    kudosUrl: kudosUrl
+  };
+};
+
+var Wrapper = function Wrapper(props) {
+  return /*#__PURE__*/React.createElement(CardWrapper, {
+    "data-testid": "profilecard"
+  }, props.children);
+};
+
+export var ProfilecardInternal = function ProfilecardInternal(props) {
+  var _useState = useState(getPageTime()),
+      _useState2 = _slicedToArray(_useState, 1),
+      openTime = _useState2[0];
+
+  var createAnalyticsEvent = props.createAnalyticsEvent;
+  var fireAnalytics = useCallback(function (payload) {
+    if (createAnalyticsEvent) {
+      fireEvent(createAnalyticsEvent, payload);
     }
-  }, {
-    key: "getActions",
-    value: function getActions() {
-      var _this3 = this;
-
-      var actions = this.props.actions || [];
-
-      if (!this.props.isCurrentUser && this.props.status === 'active' && this.props.isKudosEnabled) {
-        var kudosAction = {
-          label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
-          id: this.GIVE_KUDOS_ACTION_ID,
-          callback: function callback() {
-            _this3.kudosButtonCallback();
-          },
-          link: this.kudosUrl()
-        };
-        return actions.concat([kudosAction]);
-      }
-
+  }, [createAnalyticsEvent]);
+  var fireAnalyticsWithDuration = useCallback(function (generator) {
+    var elapsed = getPageTime() - openTime;
+    var event = generator(elapsed);
+    fireAnalytics(event);
+  }, [fireAnalytics, openTime]);
+
+  var _useKudos = useKudos(props.cloudId, props.userId, props.teamCentralBaseUrl, props.openKudosDrawer),
+      kudosAction = _useKudos.kudosAction;
+
+  var _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      isCurrentUser = props.isCurrentUser,
+      isKudosEnabled = props.isKudosEnabled,
+      _props$status = props.status,
+      status = _props$status === void 0 ? 'active' : _props$status;
+  var realActions = useMemo(function () {
+    if (isCurrentUser || !isKudosEnabled || status !== 'active') {
       return actions;
     }
-  }, {
-    key: "renderActionsButtons",
-    value: function renderActionsButtons() {
-      var _this4 = this;
-
-      if (this.props.actions && this.props.actions.length === 0) {
-        return null;
-      }
 
-      var actions = this.getActions();
-      var firstTwoActions = actions.slice(0, 2);
-      var restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
-      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, firstTwoActions.map(function (action, idx) {
-        return _this4.renderButton(action, idx);
-      }), restOfActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
-        actions: restOfActions,
-        onItemClick: function onItemClick(action, args, event) {
-          return _this4.onActionClick(action, args, event);
-        }
-      }));
-    }
-  }, {
-    key: "onActionClick",
-    value: function onActionClick(action, args, event) {
-      this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-        id: action.id || null,
-        duration: this.durationSince(this.timeOpen)
+    return actions.concat([kudosAction]);
+  }, [actions, isCurrentUser, isKudosEnabled, kudosAction, status]);
+  var isLoading = props.isLoading,
+      fullName = props.fullName,
+      hasError = props.hasError;
+  var canRender = !hasError && !isLoading && !!(fullName || status === 'closed');
+  useEffect(function () {
+    if (canRender) {
+      fireAnalyticsWithDuration(function (duration) {
+        return profileCardRendered('user', 'content', {
+          duration: duration,
+          numActions: realActions.length
+        });
       });
-
-      if (action.callback && isBasicClick(event)) {
-        event.preventDefault();
-        action.callback.apply(action, [event].concat(_toConsumableArray(args)));
-      }
-    }
-  }, {
-    key: "renderCardDetailsDefault",
-    value: function renderCardDetailsDefault() {
-      var _this5 = this;
-
-      var _this$props2 = this.props,
-          meta = _this$props2.meta,
-          location = _this$props2.location,
-          email = _this$props2.email,
-          timestring = _this$props2.timestring,
-          companyName = _this$props2.companyName,
-          customLozenges = _this$props2.customLozenges;
-      return /*#__PURE__*/React.createElement(DetailsGroup, null, this.renderFullNameAndPublicName(meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), customLozenges && this.renderCustomLozenges(customLozenges), /*#__PURE__*/React.createElement(IconLabel, {
-        icon: "email"
-      }, email), /*#__PURE__*/React.createElement(IconLabel, {
-        icon: "time"
-      }, timestring), /*#__PURE__*/React.createElement(IconLabel, {
-        icon: "companyName"
-      }, companyName), /*#__PURE__*/React.createElement(IconLabel, {
-        icon: "location"
-      }, location), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
-        reportingLines: this.props.reportingLines,
-        reportingLinesProfileUrl: this.props.reportingLinesProfileUrl,
-        onReportingLinesClick: this.props.onReportingLinesClick,
-        analytics: this.props.analytics,
-        getDuration: function getDuration() {
-          return _this5.durationSince(_this5.timeOpen);
-        }
-      }));
-    }
-  }, {
-    key: "renderCardDetailsForDisabledAccount",
-    value: function renderCardDetailsForDisabledAccount() {
-      var _this$props3 = this.props,
-          status = _this$props3.status,
-          companyName = _this$props3.companyName,
-          hasDisabledAccountLozenge = _this$props3.hasDisabledAccountLozenge;
-      return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(FullNameLabel, {
-        noMeta: true,
-        isDisabledAccount: true
-      }, this.getDisabledAccountName()), hasDisabledAccountLozenge && /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
-        appearance: "default",
-        isBold: true
-      }, status === 'inactive' && /*#__PURE__*/React.createElement(FormattedMessage, messages.inactiveAccountMsg), status === 'closed' && /*#__PURE__*/React.createElement(FormattedMessage, messages.closedAccountMsg))), /*#__PURE__*/React.createElement(DisabledInfo, null, this.getDisabledAccountDesc()), status === 'inactive' && /*#__PURE__*/React.createElement(IconLabel, {
-        icon: "companyName"
-      }, companyName));
     }
-  }, {
-    key: "getDisabledAccountName",
-    value: function getDisabledAccountName() {
-      var _this$props4 = this.props,
-          nickname = _this$props4.nickname,
-          fullName = _this$props4.fullName,
-          status = _this$props4.status;
-
-      if (status === 'inactive') {
-        return fullName || nickname;
-      } else if (status === 'closed') {
-        return nickname || /*#__PURE__*/React.createElement(FormattedMessage, messages.disabledAccountDefaultName);
-      }
-
-      return null;
-    }
-  }, {
-    key: "getDisabledAccountDesc",
-    value: function getDisabledAccountDesc() {
-      var _this$props5 = this.props,
-          _this$props5$status = _this$props5.status,
-          status = _this$props5$status === void 0 ? 'closed' : _this$props5$status,
-          statusModifiedDate = _this$props5.statusModifiedDate,
-          disabledAccountMessage = _this$props5.disabledAccountMessage;
-      var date = statusModifiedDate ? new Date(statusModifiedDate * 1000) : null;
-      var relativeDateKey = relativeDate(date); // consumer does not want to use built-in message
+  }, [canRender, fireAnalyticsWithDuration, realActions]);
+
+  if (hasError) {
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      reload: props.clientFetchProfile,
+      errorType: props.errorType || null,
+      fireAnalytics: fireAnalytics
+    }));
+  }
 
-      if (disabledAccountMessage) {
-        return disabledAccountMessage;
-      }
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(LoadingView, {
+      fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    }));
+  }
 
-      var secondSentence = null;
+  if (!canRender) {
+    return null;
+  }
 
-      if (relativeDateKey) {
-        secondSentence = /*#__PURE__*/React.createElement(FormattedMessage // @ts-ignore
-        , messages["".concat(status, "AccountDescMsgHasDate").concat(relativeDateKey)]);
-      } else {
-        secondSentence =
-        /*#__PURE__*/
-        // @ts-ignore
-        React.createElement(FormattedMessage, messages["".concat(status, "AccountDescMsgNoDate")]);
-      }
+  var isDisabledUser = status === 'inactive' || status === 'closed';
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(CardContainer, {
+    isDisabledUser: isDisabledUser,
+    withoutElevation: props.withoutElevation
+  }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xlarge",
+    src: status !== 'closed' ? props.avatarUrl : undefined,
+    borderColor: token('elevation.shadow.overlay', N0)
+  })), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(ProfileCardDetails, _extends({}, props, {
+    status: status,
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+  })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, {
+    actions: realActions,
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+  })))));
+};
+
+var Actions = function Actions(_ref) {
+  var actions = _ref.actions,
+      fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration;
+  var onActionClick = useCallback(function (action, args, event, index) {
+    fireAnalyticsWithDuration(function (duration) {
+      return actionClicked('user', {
+        duration: duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index: index,
+        actionId: action.id || 'no-id-specified'
+      });
+    });
 
-      return /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.generalDescMsgForDisabledUser), ' ', secondSentence);
+    if (action.callback && isBasicClick(event)) {
+      event.preventDefault();
+      action.callback.apply(action, [event].concat(_toConsumableArray(args)));
     }
-  }, {
-    key: "renderFullNameAndPublicName",
-    value: function renderFullNameAndPublicName(meta) {
-      var _this$props6 = this.props,
-          nickname = _this$props6.nickname,
-          fullName = _this$props6.fullName;
+  }, [fireAnalyticsWithDuration]);
 
-      if (!fullName && !nickname) {
-        return null;
-      }
+  if (!actions || actions.length === 0) {
+    return null;
+  }
 
-      var displayName = fullName === nickname ? fullName : "".concat(fullName).concat(nickname ? " (".concat(nickname, ") ") : '');
-      return /*#__PURE__*/React.createElement(FullNameLabel, {
-        noMeta: !meta
-      }, displayName);
-    } // Pass lozenges as an array rather taking it from the props. This will allow us combine the
-    // other lozenges (like the "deactivated" lozenge) if we need to.
+  var regularActions = actions.slice(0, ACTION_OVERFLOW_THRESHOLD);
+  var overflowActions = actions.length > ACTION_OVERFLOW_THRESHOLD ? actions.slice(ACTION_OVERFLOW_THRESHOLD) : undefined;
+  return /*#__PURE__*/React.createElement(ActionButtonGroup, {
+    "data-testid": "profilecard-actions"
+  }, regularActions.map(function (action, index) {
+    var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
+    var button = /*#__PURE__*/React.createElement(Button, {
+      appearance: "default",
+      key: action.id || index,
+      onClick: function onClick(event) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
 
-  }, {
-    key: "renderCustomLozenges",
-    value: function renderCustomLozenges(lozenges) {
-      return lozenges.length > 0 ? /*#__PURE__*/React.createElement(CustomLozengeContainer, null, lozenges.map(function (_ref, index) {
-        var text = _ref.text,
-            otherProps = _objectWithoutProperties(_ref, _excluded);
+        return onActionClick(action, args, event, index);
+      },
+      href: action.link
+    }, action.label, isKudos && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
 
-        return /*#__PURE__*/React.createElement(Lozenge, _extends({}, otherProps, {
-          key: index
-        }), text);
-      })) : null;
+    if (isKudos) {
+      return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, button);
     }
-  }, {
-    key: "renderCardDetailsApp",
-    value: function renderCardDetailsApp() {
-      return /*#__PURE__*/React.createElement(DetailsGroup, null, this.renderFullNameAndPublicName(), /*#__PURE__*/React.createElement(AppTitleLabel, null, "App"));
-    }
-  }, {
-    key: "renderCardDetails",
-    value: function renderCardDetails() {
-      var _this$props7 = this.props,
-          isBot = _this$props7.isBot,
-          status = _this$props7.status;
-
-      if (isBot) {
-        return this.renderCardDetailsApp();
-      }
 
-      if (status === 'inactive' || status === 'closed') {
-        return this.renderCardDetailsForDisabledAccount();
-      }
-
-      return this.renderCardDetailsDefault();
+    return button;
+  }), overflowActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
+    actions: overflowActions,
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    onItemClick: function onItemClick(action, args, event, index) {
+      return onActionClick(action, args, event, index + ACTION_OVERFLOW_THRESHOLD);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props8 = this.props,
-          fullName = _this$props8.fullName,
-          status = _this$props8.status,
-          withoutElevation = _this$props8.withoutElevation,
-          reportingLines = _this$props8.reportingLines;
-      var cardContent = null; // @FIXME do closed users have empty fullName field?
-
-      var canRender = fullName || status === 'closed';
-
-      if (this.props.hasError) {
-        this.callAnalytics(AnalyticsName.PROFILE_CARD_ERROR, {});
-        cardContent = this.renderErrorMessage();
-      } else if (this.props.isLoading) {
-        cardContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, null));
-      } else if (canRender) {
-        var _reportingLines$manag, _reportingLines$repor;
-
-        var isDisabledUser = status === 'inactive' || status === 'closed';
-        var actions = this.renderActionsButtons();
-        this.callAnalytics(AnalyticsName.PROFILE_CARD_LOADED, {
-          duration: this.durationSince(this.timeOpen),
-          managersCount: (reportingLines === null || reportingLines === void 0 ? void 0 : (_reportingLines$manag = reportingLines.managers) === null || _reportingLines$manag === void 0 ? void 0 : _reportingLines$manag.length) || 0,
-          directReportsCount: (reportingLines === null || reportingLines === void 0 ? void 0 : (_reportingLines$repor = reportingLines.reports) === null || _reportingLines$repor === void 0 ? void 0 : _reportingLines$repor.length) || 0
-        });
-        cardContent = /*#__PURE__*/React.createElement(CardContainer, {
-          isDisabledUser: isDisabledUser,
-          withoutElevation: withoutElevation
-        }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
-          size: "xlarge",
-          src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: token('elevation.surface.overlay', N0)
-        })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
-      }
-
-      return /*#__PURE__*/React.createElement(CardWrapper, null, cardContent);
-    }
-  }]);
-
-  return Profilecard;
-}(React.PureComponent);
-
-_defineProperty(Profilecard, "defaultProps", {
-  isLoading: false,
-  hasError: false,
-  errorType: null,
-  status: 'active',
-  isBot: false,
-  isNotMentionable: false,
-  actions: [],
-  hasDisabledAccountLozenge: true,
-  customLozenges: [],
-  analytics: function analytics() {
-    return null;
-  },
-  clientFetchProfile: function clientFetchProfile() {
-    return null;
-  }
-});
+  }));
+};
+
+var LoadingView = function LoadingView(_ref2) {
+  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration;
+  useEffect(function () {
+    fireAnalyticsWithDuration(function (duration) {
+      return profileCardRendered('user', 'spinner', {
+        duration: duration
+      });
+    });
+  }, [fireAnalyticsWithDuration]);
+  return /*#__PURE__*/React.createElement(SpinnerContainer, {
+    "data-testid": "profilecard-spinner-container"
+  }, /*#__PURE__*/React.createElement(Spinner, null));
+};
 
-export { Profilecard as default };
+export default withAnalyticsEvents()(ProfilecardInternal);