<script>
  import { onMount } from 'svelte';
  import { Article, Button, Skeleton } from 'spaper';

  onMount(() => {
    setInterval(() => loading = !loading, 2000);
  })

  let loading = true;
</script>

<Article border aria-busy={loading}>
  {#snippet title()}
    {#if !loading}Title{/if}
    <Skeleton active={loading} --width="5rem" --height="3rem" />
  {/snippet}
  {#snippet meta()}
    {#if !loading}Written by Super User on 24 November 2017. Posted in Blog{/if}
    <Skeleton active={loading} --width="20rem" />
  {/snippet}
  {#snippet textLead()}
    {#if !loading}
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Pariatur repellendus excepturi
    {/if}
    <Skeleton active={loading} count={3} --width="75%" />
  {/snippet}
  {#if !loading}
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
  {/if}
  <Skeleton active={loading} count={4} />
  {#snippet footer()}
    {#if !loading}
      <Button class="m-2">Read More</Button>
      <Button class="m-2">5 Comments</Button>
    {/if}
    <Skeleton active={loading} count={2} inline class="gap-2"
              --width="6rem" --height="2.5rem" />
  {/snippet}
</Article>

<Skeleton --width="20%" />
<Skeleton --width="40%" />
<Skeleton --width="60%" />
<Skeleton --width="80%" />
<Skeleton count={6} inline shape="circle" size="2rem" class="gap-2" />
<Skeleton count={3} inline shape="square" size="2.5rem" class="gap-2" />
<Skeleton count={3} inline shape="circle" size="5rem" class="gap-2" />
<Skeleton count={3} inline shape="square" class="gap-2" itemClass="size-12" />