Svelte - текст внутри моей кнопки не меняется

Я предполагаю, что ваш вопрос относится конкретно к кнопке CALIBRAR, поскольку она единственная, действительно запускающая полный цикл действия / ответа.

Я не знаю, почему вы ожидаете, что текст вашей кнопки обновится, когда вы установите для него предопределенное значение:

<Button
  on:active={calibrate}
  {loadingEffect}
  ButtonText="CALIBRAR"
  delay={400} />

ButtonText в вызове вашего компонента выше является именем свойства и вообще не связано с переменной ButtonText, которую вы определяете в разделе <script>. Вы должны сделать это явно:

<Button
  on:active={calibrate}
  {loadingEffect}
  ButtonText={ButtonText}
  delay={400} />

или, поскольку имя свойства и имя переменной совпадают, вы можете использовать сокращение:

<Button
  on:active={calibrate}
  {loadingEffect}
  {ButtonText}
  delay={400} />

Вам также необходимо обновить раздел скрипта, чтобы правильно инициализировать переменную ButtonText, поскольку теперь она используется для установки текста по умолчанию для вашей кнопки:

<script>
  ...
  let ButtonText = 'CALIBRAR'
  ...
</script>

Обратите внимание, что это, очевидно, действительно только для этой единственной кнопки калибровки. Если бы у вас было несколько кнопок с динамическим текстом, вам, вероятно, пришлось бы использовать массив или объект с ключом для хранения их значения по умолчанию и текущего состояния вместо одной переменной.

Я сделал это следующим образом:

<script>
  import Button from '../components/Button.svelte'
  import { cubiqSetUp } from '../../../store/store.js'
  import { fly } from 'svelte/transition'
  import URLS from '../../../api/endpoints.js'

  let loadingEffect = [false, false, false, false]
  let ButtonText = ['CUBICAR', 'CALIBRAR', 'GUARDAR', 'IMPRIMIR']
  async function calibrate(current) {
    loadingEffect[1] = true
    ButtonText[1] = 'CARGANDO...'
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect[1] = false
        ButtonText[1] = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText[1] = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText[1] = 'ERROR'
        loadingEffect[1] = false
        setTimeout(() => {
          ButtonText[1] = current.detail
        }, 1500)
      })
  }

  async function cubicate(current) {
    loadingEffect[0] = true
    ButtonText[0] = 'CARGANDO...'
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect[0] = false
        ButtonText[0] = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText[0] = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText[0] = 'ERROR'
        loadingEffect[0] = false
        setTimeout(() => {
          ButtonText[0] = current.detail
        }, 1500)
      })
  }
</script>

<div class="Buttons">
  <div class="Buttons-container">
    <Button
      on:active={cubicate}
      loadingEffect={loadingEffect[0]}
      ButtonText={ButtonText[0]} />
    <Button
      on:active={calibrate}
      loadingEffect={loadingEffect[1]}
      ButtonText={ButtonText[1]}
      delay={400} />
    {#if $cubiqSetUp.print_info === 'true' && $cubiqSetUp.OCR === 'true'}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[3]}
        loadingEffect={loadingEffect[3]}
        delay={800} />
    {:else if $cubiqSetUp.print_info === 'true'}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[2]}
        loadingEffect={loadingEffect[2]}
        delay={800} />
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[3]}
        loadingEffect={loadingEffect[3]}
        delay={1200} />
    {:else if $cubiqSetUp.OCR === 'true'}
      <!-- No additional buttons -->
    {:else}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[2]}
        loadingEffect={loadingEffect[2]}
        delay={800} />
    {/if}
  </div>
</div>

Я не уверен, что это лучшие практики, но они отлично работают.

Примечание. Мне все еще нужно реализовать остальные функции.