<template>
  <button type="submit" @click="handleClick">
    <template v-if="isLoading">
      <span
        class="spinner-border spinner-border-lg"
        role="status"
        aria-hidden="true"
      ></span>
      <span class="visually-hidden">{{ $trans("Loading") }}...</span>
    </template>
    <slot name="caption" v-else></slot>
  </button>
</template>
<script>
export default {
  name: "LoadingButton",
  emits: ["clicked"],
  props: ["task"],
  computed: {
    isLoading() {
      return (
        this.$store.state.isLoading &&
        this.$store.state.loadingTask == this.task
      );
    },
  },
  methods: {
    handleClick() {
      this.$store.state.loadingTask = this.task;
      this.$emit("clicked");
    },
  },
};
</script>
