<script lang="ts">
  import type { LoadingStyle } from "../types/ui";
  import BarLoader from "./BarLoader.svelte";
  import DotsLoader from "./DotsLoader.svelte";
  import SpinnerLoader from "./SpinnerLoader.svelte";

  export let style: LoadingStyle = "dots";
  export let active: boolean = false;

  const componentMap = {
    dots: DotsLoader,
    spinner: SpinnerLoader,
    bar: BarLoader,
    none: null,
  };
</script>

{#if active && componentMap[style]}
  <svelte:component this={componentMap[style]} />
{/if}

<style></style>
