radicle-explorer/src/List.svelte

<script lang="ts">
  import Button from "@app/Button.svelte";
  import Loading from "@app/Loading.svelte";
  import { fade } from "svelte/transition";

  type Item = $$Generic;

  export let items: Item[];
  export let query: () => Promise<Item[]>;

  // Used to handle the display of the trigger to load more items, according to the current loading state.
  let loading = false;
  // Should be changed to true, once no more items are being returned.
  let complete = false;

  const transitionParams = { duration: 200 };

  const fetchMore = async () => {
    loading = true;
    const response = await query();

    if (response.length > 0) {
      items = [...items, ...response];
    } else {
      complete = true;
    }

    loading = false;
  };
</script>

<style>
  .more {
    margin-top: 1rem;
    height: 40px;
    text-align: center;
  }
</style>

<slot name="list" {items} />
{#if !complete}
  <slot name="more" {fetchMore} {loading}>
    {#if loading}
      <div class="more" transition:fade={transitionParams}>
        <Loading small />
      </div>
    {:else}
      <div class="more" transition:fade={transitionParams}>
        <Button
          variant="secondary"
          waiting={loading}
          disabled={loading}
          on:click={fetchMore}>
          More
        </Button>
      </div>
    {/if}
  </slot>
{/if}