Показать Svelte Component только для 1 элемента в #Each Block

Question

У меня есть блок #each, показывающий изображение и текст. Если пользователь нажимает кнопку, я хочу показать компонент на этом c изображении, а не на всех изображениях. Прямо сейчас у меня есть что-то вроде следующего, поэтому #if loading покажите компонент LoadingSpinnger. Это отображается на всех изображениях, а не только на том, на которое щелкнули. Есть ли способ добавить компонент внутри div, чтобы он не применялся ко всем изображениям?

 {#each things as thing}
        <div class="image">
          {#if loading}
            <LoadingSpinner />
          {/if}
          <img
            src={thing.p}
            id ={thing.id}  />
        </div>
      <div class="info">
        Name: {thing.n} Species: {thing.s}
      </div>
      <div class="button">
        <button on:click={addComponent()}>
          Button Text
        </button>
      </div>
  {/each}

Answer 1

Это потому, что переменная loading не привязана к какому-либо конкретному c изображению.

Чтобы отслеживать состояние загрузки для каждого thing, используйте словарь с ключом thing.id.

Затем проверьте словарь loading с помощью thing.id:

{#each things as thing}
  {#if loading[thing.id]}
    <LoadingSpinner/>
  {:else}
    <img src={thing.src}/>
  {/if}
{/each}

Answer 2

Ответ Джошнусса тоже работает, но мне нужно было сохранить переменную загрузки как истинное / ложное значение, потому что она переключает другие переменные. Поэтому я просто добавил новую переменную thingLoading и использовал ее так:

{#each things as thing}
    <div class="image">
      {#if loading && thingLoading === thing.id}
        <LoadingSpinner />
      {/if}
      <img
        src={thing.p}
        id ={thing.id}  />
    </div>
  <div class="info">
    Name: {thing.n} Species: {thing.s}
  </div>
  <div class="button">
    <button on:click={addComponent()}>
      Button Text
    </button>
  </div>
{/each}