@twreporter/react-article-components 1.6.0 → 1.6.2-rc.0

package/lib/components/article-page.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _reactScroll = require("react-scroll");
-
 var _body = _interopRequireDefault(require("./body"));
 
 var _desktopAside = _interopRequireDefault(require("./aside/desktop-aside"));
@@ -384,14 +382,12 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         key: _.get(post, 'slug', 'article-page-body-key'),
         brief: _.get(post, 'brief.api_data'),
         content: _.get(post, 'content.api_data')
-      })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_reactScroll.Element, {
-        name: _anchor.relatedPostAnchor
-      }, /*#__PURE__*/_react["default"].createElement(_license["default"], {
+      })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
         license: post.copyright,
         publishedDate: post.published_date,
-        id: _anchor.relatedPostAnchor // current scroll to releated post anchor
+        id: _anchor.RELATED_POST_ANCHOR_ID // current scroll to releated post anchor
 
-      })), /*#__PURE__*/_react["default"].createElement(StyledSeparationCurve, null), /*#__PURE__*/_react["default"].createElement(RelatedBlock, null, /*#__PURE__*/_react["default"].createElement(_related["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(StyledSeparationCurve, null), /*#__PURE__*/_react["default"].createElement(RelatedBlock, null, /*#__PURE__*/_react["default"].createElement(_related["default"], {
         id: post.id,
         data: relatedPosts,
         hasMore: hasMoreRelateds,

package/lib/components/aside/desktop-tools.js

@@ -11,7 +11,7 @@ var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/d
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -104,6 +104,9 @@ var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 });
 
 function FBShareBT(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
   var handleClick = function handleClick() {
     var currentURL = window.location.href;
     var location = 'https://www.facebook.com/dialog/feed?' + 'display=page' + "&app_id=".concat(props.appID) + "&link=".concat(encodeURIComponent(currentURL)) + "&redirect_uri=".concat(encodeURIComponent('https://www.facebook.com/'));
@@ -113,7 +116,8 @@ function FBShareBT(props) {
   return /*#__PURE__*/_react["default"].createElement(ShareIconBlock, {
     id: "fb-share"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Facebook, {
-    onClick: handleClick
+    onClick: handleClick,
+    releaseBranch: releaseBranch
   }));
 }
 
@@ -122,6 +126,9 @@ FBShareBT.propTypes = {
 };
 
 function TwitterShareBT(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
   var handleClick = function handleClick() {
     var currentURL = window.location.href;
     var location = 'https://twitter.com/intent/tweet?' + "url=".concat(encodeURIComponent(currentURL), "&text=").concat(encodeURIComponent(document.title + ' #報導者'));
@@ -131,11 +138,15 @@ function TwitterShareBT(props) {
   return /*#__PURE__*/_react["default"].createElement(ShareIconBlock, {
     id: "twitter-share"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Twitter, {
-    onClick: handleClick
+    onClick: handleClick,
+    releaseBranch: releaseBranch
   }));
 }
 
 function LineShareBT(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
   var handleClick = function handleClick() {
     var currentURL = window.location.href;
     var location = "https://social-plugins.line.me/lineit/share?url=".concat(encodeURIComponent(currentURL));
@@ -145,33 +156,69 @@ function LineShareBT(props) {
   return /*#__PURE__*/_react["default"].createElement(ShareIconBlock, {
     id: "line-share"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Line, {
-    onClick: handleClick
+    onClick: handleClick,
+    releaseBranch: releaseBranch
   }));
 }
 
-function BookmarkIcon(isBookmarked, addAction, removeAction) {
-  var iconType = isBookmarked ? 'saved' : 'add';
-  return /*#__PURE__*/_react["default"].createElement(BookmarkIconBlock, {
-    onClick: isBookmarked ? removeAction : addAction,
-    isBookmarked: isBookmarked
-  }, /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
-    type: iconType
-  }));
-}
+var BookmarkBlock = function BookmarkBlock(_ref) {
+  var articleMeta = _ref.articleMeta;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
+  var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
+    var iconType = isBookmarked ? 'saved' : 'add';
+    var id = isBookmarked ? 'remove-bookmark' : 'add-bookmark';
+    return /*#__PURE__*/_react["default"].createElement(BookmarkIconBlock, {
+      onClick: isBookmarked ? removeAction : addAction,
+      isBookmarked: isBookmarked,
+      id: id
+    }, /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+      type: iconType,
+      releaseBranch: releaseBranch
+    }));
+  };
 
-var defaultFbAppID = '962589903815787';
+  return /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
+    toAutoCheck: false,
+    articleMeta: articleMeta,
+    renderIcon: renderIcon
+  });
+};
 
-var Tools = function Tools(_ref) {
-  var backToTopic = _ref.backToTopic,
-      fbAppID = _ref.fbAppID,
-      height = _ref.height,
-      onFontLevelChange = _ref.onFontLevelChange,
-      articleMetaForBookmark = _ref.articleMetaForBookmark;
-  var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
+BookmarkBlock.propTypes = {
+  articleMeta: _aside["default"].tools.articleMetaForBookmark
+};
+
+var BackToTopic = function BackToTopic(_ref2) {
+  var backToTopic = _ref2.backToTopic;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+  return /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
     return /*#__PURE__*/_react["default"].createElement(components.Link, {
       to: backToTopic,
       target: "_self"
-    }, /*#__PURE__*/_react["default"].createElement(BackToTopicBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Topic, null)));
+    }, /*#__PURE__*/_react["default"].createElement(BackToTopicBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Topic, {
+      releaseBranch: releaseBranch
+    })));
+  });
+};
+
+BackToTopic.propTypes = {
+  backToTopic: _aside["default"].tools.backToTopic
+};
+var defaultFbAppID = '962589903815787';
+
+var Tools = function Tools(_ref3) {
+  var backToTopic = _ref3.backToTopic,
+      fbAppID = _ref3.fbAppID,
+      height = _ref3.height,
+      onFontLevelChange = _ref3.onFontLevelChange,
+      articleMetaForBookmark = _ref3.articleMetaForBookmark;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+  var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
+    backToTopic: backToTopic
   }) : null;
 
   var onPrinterClick = function onPrinterClick() {
@@ -180,14 +227,14 @@ var Tools = function Tools(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(ToolsBlock, {
     height: height
-  }, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
-    toAutoCheck: false,
-    articleMeta: articleMetaForBookmark,
-    renderIcon: BookmarkIcon
+  }, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
+    articleMeta: articleMetaForBookmark
   }), /*#__PURE__*/_react["default"].createElement(TextIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Text, {
-    onClick: onFontLevelChange
+    onClick: onFontLevelChange,
+    releaseBranch: releaseBranch
   })), /*#__PURE__*/_react["default"].createElement(PrintIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Printer, {
-    onClick: onPrinterClick
+    onClick: onPrinterClick,
+    releaseBranch: releaseBranch
   })), /*#__PURE__*/_react["default"].createElement(FBShareBT, {
     appID: fbAppID || defaultFbAppID
   }), /*#__PURE__*/_react["default"].createElement(TwitterShareBT, null), /*#__PURE__*/_react["default"].createElement(LineShareBT, null));

package/lib/components/aside/mobile-tool-bar.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _reactScroll = require("react-scroll");
-
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
 var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
@@ -43,6 +41,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -347,17 +349,48 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
   var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
     var iconType = isBookmarked ? 'saved' : 'add';
     var text = isBookmarked ? '已儲存' : '加入書籤';
+    var id = isBookmarked ? 'remove-bookmark' : 'add-bookmark';
+
+    var handleClick = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+        var action;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                action = isBookmarked ? removeAction : addAction;
+                _context2.prev = 1;
+                _context2.next = 4;
+                return action();
+
+              case 4:
+                _context2.next = 9;
+                break;
+
+              case 6:
+                _context2.prev = 6;
+                _context2.t0 = _context2["catch"](1);
+                console.error('add bookmark fail', _context2.t0);
+
+              case 9:
+                toastr(isBookmarked);
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[1, 6]]);
+      }));
 
-    var handleClick = function handleClick() {
-      var action = isBookmarked ? removeAction : addAction;
-      action();
-      setTimeout(function () {
-        toastr(isBookmarked);
-      }, 500);
-    };
+      return function handleClick() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
 
     return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-      onClick: handleClick
+      onClick: handleClick,
+      id: id
     }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
       text: text,
       iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
@@ -393,8 +426,8 @@ BookmarkBlock.propTypes = {
   articleMeta: _aside["default"].tools.articleMetaForBookmark
 };
 
-var BackToTopic = function BackToTopic(_ref7) {
-  var backToTopic = _ref7.backToTopic;
+var BackToTopic = function BackToTopic(_ref8) {
+  var backToTopic = _ref8.backToTopic;
   var hideText = (0, _react.useContext)(HideTextContext);
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
@@ -424,32 +457,27 @@ var RelatedPost = function RelatedPost() {
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
 
-  var scrollToBottom = function scrollToBottom() {
-    _reactScroll.scroller.scrollTo(_anchor.relatedPostAnchor, {
-      duration: 800,
-      smooth: 'easeInOutQuint'
-    });
-  };
+  var anchorScrollAttr = _defineProperty({}, _anchor.ARTICLE_ANCHOR_SCROLL, 'true');
 
-  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-    onClick: scrollToBottom
-  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement("a", _extends({
+    href: "#".concat(_anchor.RELATED_POST_ANCHOR_ID)
+  }, anchorScrollAttr), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
     text: "\u76F8\u95DC\u6587\u7AE0",
     iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Article, {
       releaseBranch: releaseBranch
     }),
     theme: theme,
     hideText: hideText
-  }));
+  })));
 };
 
-var ToolBar = function ToolBar(_ref8) {
-  var backToTopic = _ref8.backToTopic,
-      _ref8$fbAppID = _ref8.fbAppID,
-      fbAppID = _ref8$fbAppID === void 0 ? defaultFbAppID : _ref8$fbAppID,
-      articleMetaForBookmark = _ref8.articleMetaForBookmark,
-      onFontLevelChange = _ref8.onFontLevelChange,
-      className = _ref8.className;
+var ToolBar = function ToolBar(_ref9) {
+  var backToTopic = _ref9.backToTopic,
+      _ref9$fbAppID = _ref9.fbAppID,
+      fbAppID = _ref9$fbAppID === void 0 ? defaultFbAppID : _ref9$fbAppID,
+      articleMetaForBookmark = _ref9.articleMetaForBookmark,
+      onFontLevelChange = _ref9.onFontLevelChange,
+      className = _ref9.className;
 
   var _useState9 = (0, _react.useState)('init'),
       _useState10 = _slicedToArray(_useState9, 2),

package/lib/components/body/embedded-code.js

@@ -7,17 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Caption = exports.Block = void 0;
 
-var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("../../constants/theme"));
-
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _reactWaypoint = require("react-waypoint");
 
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
@@ -25,8 +21,32 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _merge = _interopRequireDefault(require("lodash/merge"));
 
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -92,6 +112,8 @@ function dispatchWindowLoadEvent() {
   window.dispatchEvent(loadEvent);
 }
 
+var infogramEmbed = 'infogram';
+
 var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(EmbeddedCode, _React$PureComponent);
 
@@ -103,18 +125,15 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
     _classCallCheck(this, EmbeddedCode);
 
     _this = _super.call(this, props);
-    _this._embedded = /*#__PURE__*/_react["default"].createRef();
-    return _this;
-  }
 
-  _createClass(EmbeddedCode, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isLoaded: false
+    });
 
-      var node = this._embedded.current;
+    _defineProperty(_assertThisInitialized(_this), "executeScript", function () {
+      var node = _this._embedded.current;
 
-      var scripts = _.get(this.props, ['data', 'content', 0, 'scripts']);
+      var scripts = _.get(_this.props, ['data', 'content', 0, 'scripts']);
 
       if (node && Array.isArray(scripts)) {
         var scriptsCount = scripts.length;
@@ -129,7 +148,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
             try {
               scriptEle.setAttribute(name, value);
             } catch (err) {
-              console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this2.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
+              console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
             }
           });
 
@@ -155,31 +174,73 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
 
         node.appendChild(scriptsFragment);
       }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "loadEmbed", function () {
+      if (!_this.state.isLoaded) {
+        _this.setState({
+          isLoaded: true
+        }, _this.executeScript);
+      }
+    });
+
+    _this._embedded = /*#__PURE__*/_react["default"].createRef();
+
+    var _$get = _.get(_this.props, ['data', 'content', 0], {}),
+        caption = _$get.caption,
+        embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
+
+    _this._caption = caption;
+    _this._embeddedCodeWithoutScript = embeddedCodeWithoutScript;
+    return _this;
+  }
+
+  _createClass(EmbeddedCode, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$_embeddedCodeWi;
+
+      // Delay loading infogram in loadEmbed()
+      if (!((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(infogramEmbed))) {
+        this.executeScript();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._embedded = null;
+      this._caption = null;
+      this._embeddedCodeWithoutScript = null;
     }
   }, {
     key: "render",
     value: function render() {
-      var className = this.props.className;
+      var _this$_embeddedCodeWi2;
 
-      var _$get = _.get(this.props, ['data', 'content', 0], {}),
-          caption = _$get.caption,
-          embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
+      var className = this.props.className;
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      var embed = /*#__PURE__*/_react["default"].createElement("div", {
         className: className
       }, /*#__PURE__*/_react["default"].createElement(Block, {
         ref: this._embedded,
         dangerouslySetInnerHTML: {
-          __html: embeddedCodeWithoutScript
+          __html: this._embeddedCodeWithoutScript
         }
-      }), caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, caption) : null);
+      }), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
+
+      if ((_this$_embeddedCodeWi2 = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi2 !== void 0 && _this$_embeddedCodeWi2.includes(infogramEmbed)) {
+        return this.state.isLoaded ? embed : null;
+      }
+
+      return embed;
     }
   }]);
 
   return EmbeddedCode;
-}(_react["default"].PureComponent);
+}(_react["default"].PureComponent); // Serious layout shifts show up when loading bunch of infograms due to lack of heights,
+// so here we apply waypoint wrapper to load infogram dynamically to avoid layout shifts for anchors.
+// https://twreporter-org.atlassian.net/browse/TWREPORTER-60
 
-exports["default"] = EmbeddedCode;
 
 _defineProperty(EmbeddedCode, "propTypes", {
   className: _propTypes["default"].string,
@@ -188,4 +249,49 @@ _defineProperty(EmbeddedCode, "propTypes", {
 
 _defineProperty(EmbeddedCode, "defaultProps", {
   className: ''
-});
+});
+
+var WayPointWrapper = function WayPointWrapper(props) {
+  var isScrollingToAnchor = props.isScrollingToAnchor;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInViewPort = _useState2[0],
+      setIsInViewPort = _useState2[1];
+
+  var embedRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!isScrollingToAnchor && isInViewPort) {
+      embedRef.current.loadEmbed();
+    }
+  }, [isScrollingToAnchor]);
+
+  var onEnter = function onEnter() {
+    setIsInViewPort(true);
+
+    if (!isScrollingToAnchor) {
+      embedRef.current.loadEmbed();
+    }
+  };
+
+  var onLeave = function onLeave() {
+    setIsInViewPort(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
+    onEnter: onEnter,
+    onLeave: onLeave,
+    fireOnRapidScroll: false
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
+    ref: embedRef
+  }))));
+};
+
+WayPointWrapper.defaultProps = {
+  isScrollingToAnchor: false
+};
+WayPointWrapper.propTypes = {
+  isScrollingToAnchor: _propTypes["default"].bool
+};
+var _default = WayPointWrapper;
+exports["default"] = _default;