fix: Do not show loading placeholder when iframe is loaded

#81

When embedding pages with no backgrounds, the "loading..." placeholder
label would be visible. This commit hides it when the iframe is loaded.

packages/examples/stories/tests/issues/81.stories.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../../Button'
+
+import sampleImage from '@storybook-addon-designs/assets/sample.png'
+
+export default {
+  title: 'Tests/Issues/#81',
+  decorators: [withDesign],
+}
+
+export const hideLoadingPlaceholderWhenLoaded = () => <Button>Button</Button>
+
+hideLoadingPlaceholderWhenLoaded.story = {
+  parameters: {
+    design: config({
+      type: 'iframe',
+      url: sampleImage,
+    }),
+  },
+}

packages/storybook-addon-designs/src/register/components/IFrame.tsx

@@ -18,6 +18,7 @@ interface Props {
 
 export const IFrame: SFC<Props> = ({ config, defer = false }) => {
   const [url, setUrl] = useState(defer ? undefined : config.url)
+  const [loaded, setLoaded] = useState(false)
 
   // Defer loading iframe URL.
   // Some sites (e.g. Figma) detects Fullscreen API capability on
@@ -42,13 +43,18 @@ export const IFrame: SFC<Props> = ({ config, defer = false }) => {
     return () => cancelAnimationFrame(handle)
   }, [defer, config.url])
 
+  useEffect(() => {
+    setLoaded(false)
+  }, [url])
+
   return (
     <div css={$container}>
-      <Placeholder css={$loading}>Loading...</Placeholder>
+      {!loaded && <Placeholder css={$loading}>Loading...</Placeholder>}
       <iframe
         css={$iframe}
         src={url}
         allowFullScreen={config.allowFullscreen}
+        onLoad={() => setLoaded(true)}
       />
     </div>
   )