@atlaskit/emoji 64.7.1 → 65.0.0

package/dist/cjs/components/common/EmojiImage.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _core = require("@emotion/core");
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _constants = require("../../util/constants");
+
+/** @jsx jsx */
+var EmojiImage = function EmojiImage(props) {
+  var _props$maxSize = props.maxSize,
+      maxSize = _props$maxSize === void 0 ? _constants.defaultEmojiHeight : _props$maxSize,
+      representation = props.representation,
+      showTooltip = props.showTooltip,
+      imageUrl = props.imageUrl,
+      showImageBeforeLoad = props.showImageBeforeLoad,
+      emojiId = props.emojiId,
+      onImageLoadError = props.onImageLoadError;
+  var shortName = emojiId.shortName;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      validImage = _useState2[0],
+      setValidImage = _useState2[1];
+
+  var imageSize = (0, _react.useMemo)(function () {
+    if (representation) {
+      return {
+        width: maxSize / (representation.height * representation.width),
+        height: maxSize
+      };
+    }
+
+    return {
+      width: maxSize,
+      height: maxSize
+    };
+  }, [maxSize, representation]);
+  var style = {
+    minWidth: "".concat(imageSize.width, "px"),
+    width: "".concat(imageSize.width, "px"),
+    height: "".concat(imageSize.height, "px")
+  };
+
+  var handleImageLoad = function handleImageLoad() {
+    return setValidImage(true);
+  };
+
+  var handleImageLoadError = function handleImageLoadError() {
+    setValidImage(false);
+
+    if (onImageLoadError) {
+      onImageLoadError();
+    }
+  };
+
+  var visibility = (0, _react.useMemo)(function () {
+    return showImageBeforeLoad || validImage ? 'initial' : 'hidden';
+  }, [validImage, showImageBeforeLoad]);
+  return (0, _core.jsx)("span", {
+    "data-testid": "emoji-image-".concat(shortName),
+    "aria-label": shortName,
+    className: "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(_styles.emojiImage),
+    style: style,
+    css: [_styles.emojiContainer, _styles.emojiStyles],
+    title: showTooltip ? shortName : ''
+  }, (0, _core.jsx)("img", {
+    className: "emoji",
+    alt: shortName,
+    onLoad: function onLoad() {
+      return handleImageLoad();
+    },
+    onError: function onError() {
+      return handleImageLoadError();
+    },
+    src: imageUrl,
+    style: {
+      objectFit: 'contain',
+      visibility: visibility
+    },
+    width: imageSize.width,
+    height: imageSize.height //@ts-ignore
+    ,
+    loading: "lazy"
+  }));
+};
+
+exports.EmojiImage = EmojiImage;

package/dist/cjs/components/common/EmojiPlaceholder.js

@@ -11,19 +11,19 @@ var _styles = require("./styles");
 
 var _constants = require("../../util/constants");
 
-var _typeHelpers = require("../../util/type-helpers");
-
 /** @jsx jsx */
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var shortName = props.shortName,
       _props$size = props.size,
       size = _props$size === void 0 ? _constants.defaultEmojiHeight : _props$size,
       showTooltip = props.showTooltip,
-      representation = props.representation;
+      representation = props.representation,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading;
   var scaledWidth;
   var scaledHeight;
 
-  if (representation && size && ((0, _typeHelpers.isImageRepresentation)(representation) || (0, _typeHelpers.isMediaRepresentation)(representation))) {
+  if (representation && size) {
     var _width = representation.width;
     var _height = representation.height;
 
@@ -37,14 +37,16 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var height = scaledHeight || size;
   var style = {
     fill: 'f7f7f7',
+    minWidth: "".concat(width, "px"),
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
   return (0, _core.jsx)("span", {
     "data-testid": "emoji-placeholder-".concat(shortName),
+    "aria-busy": loading,
     "aria-label": shortName,
     className: _styles.placeholder,
-    css: _styles.placeholderContainer,
+    css: loading ? [_styles.placeholderContainer, _styles.placeholderContainerAnimated] : _styles.placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

package/dist/cjs/components/common/ResourcedEmoji.js

@@ -57,7 +57,7 @@ var resourcedEmojiModuleLoader = function resourcedEmojiModuleLoader() {
 
 var resourcedEmojiComponentLoader = function resourcedEmojiComponentLoader() {
   return resourcedEmojiModuleLoader().then(function (module) {
-    return module.default;
+    return module.ResourcedEmojiComponent;
   });
 };
 

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -7,21 +7,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ResourcedEmojiComponent = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -31,7 +19,7 @@ var _typeHelpers = require("../../util/type-helpers");
 
 var _types = require("../../types");
 
-var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
+var _Emoji = _interopRequireDefault(require("./Emoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
@@ -39,76 +27,68 @@ var _analytics = require("../../util/analytics");
 
 var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
 
+var _EmojiImage = require("./EmojiImage");
+
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
 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; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ResourcedEmojiComponent, _Component);
-
-  var _super = _createSuper(ResourcedEmojiComponent);
-
-  function ResourcedEmojiComponent(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ResourcedEmojiComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ready", false);
-    _this.state = {
-      emoji: undefined,
-      loaded: false
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(ResourcedEmojiComponent, [{
-    key: "refreshEmoji",
-    value: function refreshEmoji(emojiProvider, emojiId) {
-      var _this2 = this;
-
-      var foundEmoji = emojiProvider.findByEmojiId(emojiId);
-      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
-
-      if ((0, _typeHelpers.isPromise)(foundEmoji)) {
-        this.setState({
-          loaded: false
-        });
-        foundEmoji.then(function (emoji) {
-          if (_this2.ready) {
-            // don't update state if component was unmounted
-            _this2.setState({
-              emoji: emoji,
-              loaded: true
-            });
-
-            (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
-
-            if (!emoji) {
-              // emoji is undefined
-              (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
-                metadata: {
-                  reason: 'failed to find',
-                  source: 'ResourcedEmojiComponent',
-                  data: {
-                    emoji: {
-                      id: emojiId.id,
-                      shortName: emojiId.shortName
-                    }
-                  }
-                }
-              });
-            }
-          }
-        }).catch(function () {
+var ResourcedEmojiComponentRenderStatesEnum;
+
+(function (ResourcedEmojiComponentRenderStatesEnum) {
+  ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
+  ResourcedEmojiComponentRenderStatesEnum["OPTIMISTIC"] = "OPTIMISTIC";
+  ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
+  ResourcedEmojiComponentRenderStatesEnum["EMOJI"] = "EMOJI";
+})(ResourcedEmojiComponentRenderStatesEnum || (ResourcedEmojiComponentRenderStatesEnum = {}));
+
+var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+      emojiId = _ref.emojiId,
+      showTooltip = _ref.showTooltip,
+      customFallback = _ref.customFallback,
+      _ref$fitToHeight = _ref.fitToHeight,
+      fitToHeight = _ref$fitToHeight === void 0 ? _constants.defaultEmojiHeight : _ref$fitToHeight,
+      _ref$optimistic = _ref.optimistic,
+      optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
+      optimisticImageURL = _ref.optimisticImageURL;
+  var shortName = emojiId.shortName,
+      id = emojiId.id,
+      fallback = emojiId.fallback;
+  var emojiContextValue = {
+    emoji: {
+      emojiProvider: emojiProvider
+    }
+  };
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emoji = _useState2[0],
+      setEmoji = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loaded = _useState4[0],
+      setLoaded = _useState4[1];
+
+  var fetchOrGetEmoji = function fetchOrGetEmoji(emojiProvider, emojiId) {
+    var optimisticFetch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    // TODO: Pass in optimistic into findByEmojiId to allow a single emoji meta fetch
+    var foundEmoji = emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
+    (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
+
+    if ((0, _typeHelpers.isPromise)(foundEmoji)) {
+      setLoaded(false);
+      foundEmoji.then(function (emoji) {
+        setEmoji(emoji);
+
+        if (!emoji) {
+          // emoji is undefined
           (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
             metadata: {
-              reason: 'failed to load',
+              reason: 'failed to find',
               source: 'ResourcedEmojiComponent',
               data: {
                 emoji: {
@@ -118,99 +98,113 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
               }
             }
           });
+          (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
+
+          if (!emoji) {
+            // emoji is undefined
+            (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+              metadata: {
+                reason: 'failed to find',
+                source: 'ResourcedEmojiComponent',
+                data: {
+                  emoji: {
+                    id: emojiId.id,
+                    shortName: emojiId.shortName
+                  }
+                }
+              }
+            });
+          }
+        }
+      }).catch(function () {
+        setEmoji(undefined);
+        (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+          metadata: {
+            reason: 'failed to load',
+            source: 'ResourcedEmojiComponent',
+            data: {
+              emoji: {
+                id: emojiId.id,
+                shortName: emojiId.shortName
+              }
+            }
+          }
         });
-      } else {
-        (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END); // loaded
-
-        this.setState({
-          emoji: foundEmoji,
-          loaded: true
-        });
-      }
+      }).finally(function () {
+        setLoaded(true);
+        (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
+      });
+    } else {
+      setEmoji(foundEmoji);
+      setLoaded(true);
+      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
     }
-  }, {
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.ready = true;
-
-      if (!this.state.emoji) {
-        // using UNSAFE_componentWillMount instead of componentDidMount to avoid needless
-        // rerendering.
-        this.refreshEmoji(this.props.emojiProvider, this.props.emojiId);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.ready = false;
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!emojiId) {
+      return;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId), _types.UfoEmojiTimings.FMP_END)) {
-        (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).markFMP();
-      }
+
+    if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emojiId), _types.UfoEmojiTimings.FMP_END)) {
+      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).markFMP();
     }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.emojiProvider !== this.props.emojiProvider || nextProps.emojiId !== this.props.emojiId) {
-        this.refreshEmoji(nextProps.emojiProvider, nextProps.emojiId);
-      }
+  }, [emojiId]);
+  (0, _react.useMemo)(function () {
+    if (!emojiProvider || !emojiId) {
+      return;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          emojiId = _this$props.emojiId,
-          _this$props$fitToHeig = _this$props.fitToHeight,
-          fitToHeight = _this$props$fitToHeig === void 0 ? _constants.defaultEmojiHeight : _this$props$fitToHeig,
-          showTooltip = _this$props.showTooltip;
-      var _this$state = this.state,
-          emoji = _this$state.emoji,
-          loaded = _this$state.loaded;
-      var shortName = emojiId.shortName,
-          fallback = emojiId.fallback;
-
-      if (emoji) {
-        return this.emojiWrapper( /*#__PURE__*/_react.default.createElement(_CachingEmoji.default, {
-          emoji: emoji,
-          showTooltip: showTooltip,
-          fitToHeight: fitToHeight
-        }));
-      } else if (loaded) {
-        // loaded but not found - render fallback
-        return this.emojiWrapper( /*#__PURE__*/_react.default.createElement("span", null, fallback || shortName));
-      }
 
-      return this.emojiWrapper( /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-        shortName: shortName,
-        showTooltip: showTooltip,
-        size: fitToHeight || _constants.defaultEmojiHeight
-      }));
+    fetchOrGetEmoji(emojiProvider, emojiId, optimistic);
+  }, [emojiProvider, emojiId, optimistic]);
+  var emojiRenderState = (0, _react.useMemo)(function () {
+    if (!emoji && !loaded && !optimisticImageURL) {
+      return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
+    } else if (!emoji && !loaded && optimisticImageURL) {
+      return ResourcedEmojiComponentRenderStatesEnum.OPTIMISTIC;
+    } else if (!emoji && loaded) {
+      return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
     }
-  }, {
-    key: "emojiWrapper",
-    value: function emojiWrapper(element) {
-      var _this$props$emojiId = this.props.emojiId,
-          shortName = _this$props$emojiId.shortName,
-          id = _this$props$emojiId.id,
-          fallback = _this$props$emojiId.fallback;
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-      return /*#__PURE__*/_react.default.createElement(_LegacyEmojiContextProvider.default, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        "data-emoji-id": id,
-        "data-emoji-short-name": shortName,
-        "data-emoji-text": fallback || shortName
-      }, element));
-    }
-  }]);
-  return ResourcedEmojiComponent;
-}(_react.Component);
 
-exports.default = ResourcedEmojiComponent;
+    return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
+  }, [emoji, loaded, optimisticImageURL]);
+
+  var handleOnLoadError = function handleOnLoadError(emojiId) {
+    (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'ResourcedEmojiComponent',
+        data: {
+          emoji: {
+            id: emojiId.id,
+            shortName: emojiId.shortName
+          }
+        }
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_LegacyEmojiContextProvider.default, {
+    emojiContextValue: emojiContextValue
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "data-emoji-id": id,
+    "data-emoji-short-name": shortName,
+    "data-emoji-text": fallback || shortName
+  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+    shortName: shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight || _constants.defaultEmojiHeight,
+    loading: true
+  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.OPTIMISTIC && optimisticImageURL && /*#__PURE__*/_react.default.createElement(_EmojiImage.EmojiImage, {
+    emojiId: emojiId,
+    imageUrl: optimisticImageURL,
+    maxSize: fitToHeight || _constants.defaultEmojiHeight
+  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && emoji && /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+    emoji: emoji,
+    onLoadError: handleOnLoadError,
+    showTooltip: showTooltip,
+    fitToHeight: fitToHeight
+  })));
+};
+
+exports.ResourcedEmojiComponent = ResourcedEmojiComponent;

package/dist/cjs/components/common/UploadEmoji.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uploadEmoji = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _EmojiResource = require("../../api/EmojiResource");
 
 var _analytics = require("../../util/analytics");
@@ -17,18 +13,14 @@ var _i18n = require("../i18n");
 
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) {
+var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry) {
   var startTime = Date.now();
   errorSetter(undefined);
 
   if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
     _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
 
-    emojiProvider.uploadCustomEmoji(upload).then(function (emojiDescription) {
+    emojiProvider.uploadCustomEmoji(upload, retry).then(function (emojiDescription) {
       fireAnalytics((0, _analytics.uploadSucceededEvent)({
         duration: Date.now() - startTime
       }));
@@ -47,10 +39,7 @@ var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuc
       _ufoExperiences.ufoExperiences['emoji-uploaded'].failure({
         metadata: {
           source: 'UploadEmoji',
-          error: err,
-          data: {
-            upload: _objectSpread({}, upload)
-          }
+          error: err
         }
       });
     });

package/dist/cjs/components/common/styles.js

@@ -5,7 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -21,7 +23,7 @@ var _sharedStyles = require("../../util/shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _css, _css2, _span, _css3, _css6, _input, _css7;
+var _css, _css2, _templateObject, _span, _css3, _css6, _input, _css7;
 
 var commonSelectedStyles = 'emoji-common-selected';
 exports.commonSelectedStyles = commonSelectedStyles;
@@ -59,7 +61,7 @@ var emojiToneSelectorContainer = (0, _core.css)({
 });
 exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
 var emojiStyles = (0, _core.css)((_css = {
-  borderRadius: '5px',
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   backgroundColor: 'transparent',
   display: 'inline-block',
   verticalAlign: 'middle',
@@ -85,23 +87,38 @@ var emojiContainer = (0, _core.css)((_css2 = {
 }), (0, _defineProperty2.default)(_css2, ".".concat(emojiSprite), {
   background: 'transparent no-repeat',
   display: 'inline-block',
-  verticalAlign: 'middle',
   minHeight: "".concat(_constants2.defaultEmojiHeight, "px"),
-  minWidth: "".concat(_constants2.defaultEmojiHeight, "px")
+  minWidth: "".concat(_constants2.defaultEmojiHeight, "px"),
+  verticalAlign: 'middle'
 }), _css2));
 exports.emojiContainer = emojiContainer;
 var placeholder = 'emoji-common-placeholder';
 exports.placeholder = placeholder;
 var placeholderContainer = (0, _core.css)({
-  // Ensure no vertical reflow
+  position: 'relative',
   margin: '-1px 0',
   display: 'inline-block',
   background: (0, _tokens.token)('color.border', '#f7f7f7'),
-  borderRadius: '20%',
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  overflow: 'hidden',
   verticalAlign: 'middle',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  textAlign: 'center'
 });
 exports.placeholderContainer = placeholderContainer;
+var easeSweep = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateX(-100%);\n  }\n  to   {\n    transform: translateX(100%);\n  }\n"])));
+var placeholderContainerAnimated = (0, _core.css)({
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    background: (0, _tokens.token)('color.background.neutral', _colors.N20A),
+    height: '100%',
+    width: '100%',
+    animation: "".concat(easeSweep, " 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite")
+  }
+});
+exports.placeholderContainerAnimated = placeholderContainerAnimated;
 var emojiButton = (0, _core.css)((_css3 = {
   backgroundColor: 'transparent',
   border: '0',
@@ -111,7 +128,7 @@ var emojiButton = (0, _core.css)((_css3 = {
   border: '0 none',
   padding: 0
 }), (0, _defineProperty2.default)(_css3, '&>span', (_span = {
-  borderRadius: '5px',
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '8px'
 }, (0, _defineProperty2.default)(_span, "&>.".concat(emojiSprite), {
   height: '24px',