[Feature-Request] Add "loading" prop to Buttons

[CurrentlyNoName]

Hello,

PrimeVue has many features I really like, but one that is missing and some other Frameworks do have is a loading-panel in Buttons.

Like this:

->

For example, this is very useful when a button is clicked and the button should be blocked until there is an answer from a request that is triggered from the button click.

Also triggering the same event multiple times can be prevented that way.

Best regards

[glebgolov-ziosem]

Does it make sense to implement it as a template (e.g.: <template #loading>) inside the Button component?

In the author's case, something like:

<Button label="CLICK ME" @click="handleClick($event)">
  <template #loading>
    <i class="pi pi-spin pi-spinner p-text-center"></i>
  </template>
</Button>

[Zaaaoo]

We already can perform this with a computed icon :

spinnerComputed(): string {
  let icon = ''

  if (this.loading) icon = 'pi pi-spin pi-spinner'
  else icon = 'pi pi-check-square'

  return icon
},

And

<Button label="Valid" :icon="spinnerComputed" />

[saenq]

worked well for me
<Button :label="!loading ? 'CLICK ME' : ''" :icon="loading ? 'pi pi-spin pi-spinner' : ''"/>