import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as n}from"./index-CO-0pc0F.js";import{M as s,C as r}from"./index-Z-6k0Xrj.js";import{V as l,D as p}from"./Visible.stories-B2Ba9QDY.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./BodyText-CXnxLnBi.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./Block-D3Ui8rd-.js";import"./FeaturePhoto-CKELMwR8.js";import"./PaddingReset-_TGvg1_B.js";import"./shark-D70DK9Ak.js";function i(t){const o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...n(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l}),`
`,e.jsx(o.h1,{id:"visible",children:"Visible"}),`
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Visible"})," component wraps around other components or HTML elements and uses the ",e.jsx(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API",rel:"nofollow",children:"Intersection Observer API"})," to determine if they are visible on the page."]}),`
`,e.jsx(o.p,{children:"This is useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view."}),`
`,e.jsxs(o.p,{children:["By default, ",e.jsx(o.code,{children:"visible"})," will switch between ",e.jsx(o.code,{children:"false"})," and ",e.jsx(o.code,{children:"true"})," whenever the element is in our out of view. To trigger this just once, set the prop ",e.jsx(o.code,{children:"once"})," to ",e.jsx(o.code,{children:"true"}),". This is useful for loading expensive media when they first come into view and then keeping them around once they're loaded."]}),`
`,e.jsxs(o.blockquote,{children:[`
`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"Note:"}),` Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.`]}),`
`]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
  import { Visible } from '@reuters-graphics/graphics-components';
<\/script>

<!-- Optionally set your own \`top\`, \`bottom\`, \`right\` and \`left\` values with \`px\` or \`%\` units -->
<Visible top="10px">
  {#snippet children(visible)}
    {#if visible}
      <p>Visible!</p>
    {:else}
      <p>Not yet visible.</p>
    {/if}
  {/snippet}
</Visible>
`})}),`
`,e.jsx(r,{of:p})]})}function P(t={}){const{wrapper:o}={...n(),...t.components};return o?e.jsx(o,{...t,children:e.jsx(i,{...t})}):i(t)}export{P as default};