From 0c1bf1586dc3e5276c68af387b649aa471968d32 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Wed, 10 Apr 2019 21:06:53 -0700 Subject: [PATCH] Closes outline/issues#926 Closes outline/issues#888 Added native lazy loading in prep for Chrome release --- app/embeds/components/Frame.js | 9 ++- package.json | 8 +-- yarn.lock | 120 ++++++++++++++++----------------- 3 files changed, 71 insertions(+), 66 deletions(-) diff --git a/app/embeds/components/Frame.js b/app/embeds/components/Frame.js index 1b0e3387a..26b579783 100644 --- a/app/embeds/components/Frame.js +++ b/app/embeds/components/Frame.js @@ -39,7 +39,7 @@ class Frame extends React.Component { forwardedRef, ...rest } = this.props; - const Component = border ? Iframe : 'iframe'; + const Component = border ? StyledIframe : 'iframe'; return ( @@ -52,6 +52,7 @@ class Frame extends React.Component { type="text/html" frameBorder="0" title="embed" + loading="lazy" allowFullScreen {...rest} /> @@ -68,7 +69,11 @@ const Rounded = styled.div` height: ${props => props.height}; `; -const Iframe = styled.iframe` +// This wrapper allows us to pass non-standard HTML attributes through to the DOM element +// https://www.styled-components.com/docs/basics#passed-props +const Iframe = props =>