@atlaskit/emoji 67.0.4 → 67.0.6

package/dist/cjs/api/media/TokenManager.js

@@ -1,39 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EXPIRES_AT_LATENCY_IN_SECONDS = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _utilServiceSupport = require("@atlaskit/util-service-support");
-
 // expire 30 seconds early to factor in latency, slow services, etc
 var EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 exports.EXPIRES_AT_LATENCY_IN_SECONDS = EXPIRES_AT_LATENCY_IN_SECONDS;
-
 var TokenManager = /*#__PURE__*/function () {
   function TokenManager(siteServiceConfig) {
     (0, _classCallCheck2.default)(this, TokenManager);
     this.siteServiceConfig = siteServiceConfig;
     this.tokens = new Map();
   }
-
   (0, _createClass2.default)(TokenManager, [{
     key: "isValidToken",
     value: function isValidToken(mediaApiToken) {
       var nowInSeconds = Date.now() / 1000;
       var expiresAt = mediaApiToken.expiresAt - EXPIRES_AT_LATENCY_IN_SECONDS;
-
       if (nowInSeconds < expiresAt) {
         return true;
       }
-
       return false;
     }
   }, {
@@ -54,29 +45,25 @@ var TokenManager = /*#__PURE__*/function () {
     key: "getToken",
     value: function getToken(type, forceRefresh) {
       var tokenDetail = this.tokens.get(type);
-
       if (!tokenDetail) {
         tokenDetail = {};
         this.tokens.set(type, tokenDetail);
       }
-
       var _tokenDetail = tokenDetail,
-          mediaApiToken = _tokenDetail.mediaApiToken,
-          activeTokenRefresh = _tokenDetail.activeTokenRefresh;
-
+        mediaApiToken = _tokenDetail.mediaApiToken,
+        activeTokenRefresh = _tokenDetail.activeTokenRefresh;
       if (mediaApiToken) {
         if (this.isValidToken(mediaApiToken) && !forceRefresh) {
           // still valid
           return Promise.resolve(mediaApiToken);
         }
-
         if (activeTokenRefresh) {
           // refresh token promise already active, return that
           return activeTokenRefresh;
         }
-      } // request a new token and track the promise for future requests until completed
-
+      }
 
+      // request a new token and track the promise for future requests until completed
       tokenDetail.activeTokenRefresh = this.fetchNewToken(type).then(function (token) {
         tokenDetail.mediaApiToken = token;
         tokenDetail.activeTokenRefresh = undefined;
@@ -87,5 +74,4 @@ var TokenManager = /*#__PURE__*/function () {
   }]);
   return TokenManager;
 }();
-
 exports.default = TokenManager;

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

@@ -1,58 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CachingMediaEmoji = exports.CachingEmoji = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _typeHelpers = require("../../util/type-helpers");
-
 var _types = require("../../types");
-
 var _logger = _interopRequireDefault(require("../../util/logger"));
-
 var _Emoji = _interopRequireDefault(require("./Emoji"));
-
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
-
 var _UfoErrorBoundary = require("./UfoErrorBoundary");
-
 var _analytics = require("../../util/analytics");
-
 var _constants = require("../../util/constants");
-
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
-
 var _useEmoji2 = require("../../hooks/useEmoji");
-
 var _analytics2 = require("../../util/analytics/analytics");
-
 var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
-
 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; }
-
 /**
  * Renders an emoji from a cached image, if required.
  */
 var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
-  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
-
+  var emoji = props.emoji;
+  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
     emojiId: emoji.id
@@ -60,53 +39,44 @@ var CachingEmoji = function CachingEmoji(props) {
   (0, _react.useEffect)(function () {
     if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emoji), 'fmp')) {
       (0, _analytics.sampledUfoRenderedEmoji)(emoji).markFMP();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   var emojiNode = function emojiNode() {
     if ((0, _typeHelpers.isMediaEmoji)(emoji)) {
       return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, props);
     }
-
     return /*#__PURE__*/_react.default.createElement(_Emoji.default, props);
   };
-
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
     experiences: [_analytics.ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
   }, emojiNode());
 };
+
 /**
  * Rendering a media emoji image from a cache for media emoji, with different
  * rendering paths depending on caching strategy.
  */
-
-
 exports.CachingEmoji = CachingEmoji;
-
 var CachingMediaEmoji = function CachingMediaEmoji(props) {
   var emoji = props.emoji,
-      placeholderSize = props.placeholderSize,
-      showTooltip = props.showTooltip,
-      fitToHeight = props.fitToHeight,
-      children = props.children,
-      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    placeholderSize = props.placeholderSize,
+    showTooltip = props.showTooltip,
+    fitToHeight = props.fitToHeight,
+    children = props.children,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var shortName = emoji.shortName,
-      representation = emoji.representation;
-
+    representation = emoji.representation;
   var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      cachedEmoji = _useState2[0],
-      setCachedEmoji = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    cachedEmoji = _useState2[0],
+    setCachedEmoji = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      inValidImage = _useState4[0],
-      setInvalidImage = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    inValidImage = _useState4[0],
+    setInvalidImage = _useState4[1];
   var _useEmoji = (0, _useEmoji2.useEmoji)(),
-      emojiProvider = _useEmoji.emojiProvider;
-
+    emojiProvider = _useEmoji.emojiProvider;
   var loadEmoji = (0, _react.useCallback)(function (emojiProvider) {
     (0, _logger.default)('Loading image via media cache', emoji.shortName);
     (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_START);
@@ -132,7 +102,6 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
       loadEmoji(emojiProvider);
     }
   }, [emojiProvider, loadEmoji]);
-
   var handleLoadError = function handleLoadError(_emojiId) {
     (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
       metadata: {
@@ -143,7 +112,6 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
     });
     setInvalidImage(true);
   };
-
   if (cachedEmoji && !inValidImage) {
     return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, restProps, {
       showTooltip: showTooltip,
@@ -152,7 +120,6 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
       onLoadError: handleLoadError
     }));
   }
-
   return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
     size: fitToHeight || placeholderSize,
     shortName: shortName,
@@ -160,7 +127,6 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
     representation: representation
   });
 };
-
 exports.CachingMediaEmoji = CachingMediaEmoji;
 var _default = CachingEmoji;
 exports.default = _default;

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

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = void 0;
-
 var _react = require("@emotion/react");
-
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("../../util/constants");
-
 var _styles = require("./styles");
-
 /** @jsx jsx */
 
 /**
@@ -26,7 +18,6 @@ var _styles = require("./styles");
  */
 var RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
 exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = RENDER_EMOJI_DELETE_BUTTON_TESTID;
-
 var DeleteButton = function DeleteButton(props) {
   return (0, _react.jsx)("span", {
     css: _styles.deleteButton,
@@ -44,6 +35,5 @@ var DeleteButton = function DeleteButton(props) {
     testId: "emoji-delete-button"
   }));
 };
-
 var _default = DeleteButton;
 exports.default = _default;

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

@@ -1,132 +1,98 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.Emoji = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _EmojiUtils = require("../../api/EmojiUtils");
-
 var _constants = require("../../util/constants");
-
 var _typeHelpers = require("../../util/type-helpers");
-
 var _types = require("../../types");
-
 var _mouse = require("../../util/mouse");
-
 var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
-
 var _styles = require("./styles");
-
 var _analytics = require("../../util/analytics");
-
 var _browserSupport = require("../../util/browser-support");
-
 var _useInView3 = require("../../util/useInView");
-
 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 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 handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
     return;
   }
-
   var emoji = props.emoji,
-      onSelected = props.onSelected;
+    onSelected = props.onSelected;
   event.preventDefault();
-
   if (onSelected && (0, _mouse.leftClick)(event)) {
     onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
-
 var handleKeyPress = function handleKeyPress(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
     return;
   }
-
   var emoji = props.emoji,
-      onSelected = props.onSelected;
+    onSelected = props.onSelected;
   event.preventDefault();
-
   if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
     onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
-
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
-      onMouseMove = props.onMouseMove;
-
+    onMouseMove = props.onMouseMove;
   if (onMouseMove) {
     onMouseMove((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
-
 var handleDelete = function handleDelete(props, event) {
   var emoji = props.emoji,
-      onDelete = props.onDelete;
-
+    onDelete = props.onDelete;
   if (onDelete) {
     onDelete((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
-
 var handleImageError = function handleImageError(props, event) {
   var emoji = props.emoji,
-      onLoadError = props.onLoadError; // Hide error state (but keep space for it)
+    onLoadError = props.onLoadError;
 
+  // Hide error state (but keep space for it)
   if (event.target) {
     var target = event.target;
     target.style.visibility = 'hidden';
   }
-
   if (onLoadError) {
     onLoadError((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
-}; // Pure functional components are used in favour of class based components, due to the performance!
+};
+
+// Pure functional components are used in favour of class based components, due to the performance!
 // When rendering 1500+ emoji using class based components had a significant impact.
 // TODO: add UFO tracking for sprite emoji
-
-
 var SpriteEmoji = function SpriteEmoji(props) {
   var emoji = props.emoji,
-      fitToHeight = props.fitToHeight,
-      selected = props.selected,
-      selectOnHover = props.selectOnHover,
-      className = props.className,
-      showTooltip = props.showTooltip,
-      shouldBeInteractive = props.shouldBeInteractive;
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showTooltip = props.showTooltip,
+    shouldBeInteractive = props.shouldBeInteractive;
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   var sizing = {};
-
   if (fitToHeight) {
     sizing = {
       width: "".concat(fitToHeight, "px"),
@@ -135,16 +101,13 @@ var SpriteEmoji = function SpriteEmoji(props) {
       minWidth: "".concat(fitToHeight, "px")
     };
   }
-
   var xPositionInPercent = 100 / (sprite.column - 1) * (representation.xIndex - 0);
   var yPositionInPercent = 100 / (sprite.row - 1) * (representation.yIndex - 0);
-
   var style = _objectSpread({
     backgroundImage: "url(".concat(sprite.url, ")"),
     backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
-
   return (0, _react2.jsx)("span", {
     "data-testid": "sprite-emoji-".concat(emoji.shortName),
     "data-emoji-type": "sprite",
@@ -167,38 +130,34 @@ var SpriteEmoji = function SpriteEmoji(props) {
     className: _styles.emojiSprite,
     style: style
   }, "\xA0"));
-}; // Keep as pure functional component, see renderAsSprite.
-
+};
 
+// Keep as pure functional component, see renderAsSprite.
 exports.SpriteEmoji = SpriteEmoji;
-
 var ImageEmoji = function ImageEmoji(props) {
   var emoji = props.emoji,
-      fitToHeight = props.fitToHeight,
-      selected = props.selected,
-      selectOnHover = props.selectOnHover,
-      className = props.className,
-      showTooltip = props.showTooltip,
-      showDelete = props.showDelete,
-      shouldBeInteractive = props.shouldBeInteractive,
-      onLoadSuccess = props.onLoadSuccess,
-      disableLazyLoad = props.disableLazyLoad,
-      autoWidth = props.autoWidth;
-
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showTooltip = props.showTooltip,
+    showDelete = props.showDelete,
+    shouldBeInteractive = props.shouldBeInteractive,
+    onLoadSuccess = props.onLoadSuccess,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth;
   var _useInView = (0, _useInView3.useInView)({
-    triggerOnce: true
-  }),
-      _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
-      ref = _useInView2[0],
-      inView = _useInView2[1];
-
+      triggerOnce: true
+    }),
+    _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
+    ref = _useInView2[0],
+    inView = _useInView2[1];
   var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
   var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
   var src;
   var representation = (0, _EmojiUtils.shouldUseAltRepresentation)(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
-
   if ((0, _typeHelpers.isImageRepresentation)(representation)) {
     src = representation.imagePath;
     width = representation.width;
@@ -208,9 +167,7 @@ var ImageEmoji = function ImageEmoji(props) {
     width = representation.width;
     height = representation.height;
   }
-
   var deleteButton;
-
   if (showDelete) {
     deleteButton = (0, _react2.jsx)(_DeleteButton.default, {
       onClick: function onClick(event) {
@@ -218,9 +175,7 @@ var ImageEmoji = function ImageEmoji(props) {
       }
     });
   }
-
   var sizing = {};
-
   if (fitToHeight && width && height) {
     // Presize image, to prevent reflow due to size changes after loading
     sizing = {
@@ -228,52 +183,45 @@ var ImageEmoji = function ImageEmoji(props) {
       height: fitToHeight
     };
   }
-
   var onError = function onError(event) {
     handleImageError(props, event);
   };
-
   var onLoad = function onLoad() {
     var mountedMark = ufoExp.metrics.marks.find(function (mark) {
       return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
-    }); // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
-
+    });
+    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
     }
-
     var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
       return mark.name === _types.UfoEmojiTimings.ONLOAD_START;
     });
-
     if (mountedMark && loadedStartMark) {
       ufoExp.addMetadata({
         lazyLoad: loadedStartMark.time > mountedMark.time
       });
-    } // onload_start
-
-
+    }
+    // onload_start
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
       ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
     }
-
     ufoExp.success({
       metadata: {
         IBSupported: _browserSupport.isIntersectionObserverSupported
       }
     });
-
     if (onLoadSuccess) {
       onLoadSuccess(emoji);
     }
   };
-
   var onBeforeLoad = (0, _react.useCallback)(function () {
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
     }
-  }, [ufoExp]); // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
+  }, [ufoExp]);
 
+  // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
   (0, _react.useEffect)(function () {
     if (inView) {
       onBeforeLoad();
@@ -316,36 +264,30 @@ var ImageEmoji = function ImageEmoji(props) {
     ref: ref
   }, deleteButton, emojiNode);
 };
-
 exports.ImageEmoji = ImageEmoji;
-
 var Emoji = function Emoji(props) {
-  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
-
+  var emoji = props.emoji;
+  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'Emoji',
     emojiId: emoji.id
   });
   (0, _react.useEffect)(function () {
     var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
-
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, 'fmp')) {
       ufoExp.markFMP();
     }
-
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
       ufoExp.mark(_types.UfoEmojiTimings.MOUNTED_END);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []); // TODO: We always prefer render as image as having accessibility issues with sprite representation
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
     return (0, _react2.jsx)(SpriteEmoji, props);
   }
-
   return (0, _react2.jsx)(ImageEmoji, props);
 };
-
 exports.Emoji = Emoji;
 var _default = Emoji;
 exports.default = _default;