Spinner in the button with dynamic text -- is it possible?

Front End Components General
#1

Seems like spinner only shown with static text.
With dynamic inner text it doesn’t show. Like this:

    <button id="btnform1" class="btn btn-primary" dmx-bind:disabled="state.executing || !input1sum.value" type="submit" dmx-on:click="btnform1.disable()" dmx-text="state.executing ? 'Отправляем...' : 'ОТПРАВИТЬ ОТВЕТЫ'">ОТПРАВИТЬ ОТВЕТЫ
    <span class="spinner-border spinner-border-sm" role="status"></span>
    </button>
#2

The inner text attribute replaces the contents inside the element, it cannot be used like that.
You can just do:

<button id="btnform1" class="btn btn-primary" dmx-bind:disabled="state.executing || !input1sum.value" type="submit" dmx-on:click="btnform1.disable()">
    <span dmx-text="state.executing ? 'Отправляем...' : 'ОТПРАВИТЬ ОТВЕТЫ'"></span>
    <span dmx-show="state.executing" class="spinner-border spinner-border-sm" role="status"></span>
</button>

To show отправляем… and the border spinner when the state is executing and show отправить ответь without a spinner when the state is not executing.

1 Like
#3

Indeed, thank you! Works perfect