import{j as n}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as i,C as s}from"./index-Z-6k0Xrj.js";import{S as p,D as m}from"./Spinner.stories-BHVoSObm.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"./style-DvJ3IcV1.js";function r(o){const e={code:"code",h1:"h1",p:"p",pre:"pre",...t(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{of:p}),`
`,n.jsx(e.h1,{id:"spinner",children:"Spinner"}),`
`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"Spinner"})," component creates a simple loading spinner. Use it to hide long loading times for components that may be loading expensive media files or crunching through lots of data."]}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<script>
  import { Spinner } from '@reuters-graphics/graphics-components';

  let somethingsLoading = true;
<\/script>

{#if somethingsLoading}
  <Spinner />
{:else}
  <p>The real deal is here.</p>
{/if}
`})}),`
`,n.jsx(s,{of:m})]})}function X(o={}){const{wrapper:e}={...t(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(r,{...o})}):r(o)}export{X as default};