#Loading

<script lang="ts">
  import Alert from "@pindoba/svelte-alert";
  import Button from "@pindoba/svelte-button";
  import Loading from "@pindoba/svelte-loading";
  import { stack } from "@pindoba/styled-system/patterns";

  let buttonIsLoading = $state(false);

  function handleOnclick() {
    buttonIsLoading = true;

    setTimeout(() => {
      buttonIsLoading = false;
    }, 2000);
  }
</script>

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Loading isLoading={true}>
    <Alert>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
      natus ut ea voluptatum vel officiis commodi optio a totam repellendus,
      fuga, laborum voluptatibus recusandae eos. Voluptate, vel non!
    </Alert>
  </Loading>

  <Loading isLoading={buttonIsLoading}>
    <Button onclick={handleOnclick}>Click me</Button>
  </Loading>
</div>