From 733f5c6c8a3fc5647eed41ea653d2f65bb2af8f9 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Fri, 9 Sep 2022 11:40:56 +0200
Subject: [PATCH] Add List component for more generic List creation

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 src/List.svelte | 59 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/List.svelte

diff --git a/src/List.svelte b/src/List.svelte
new file mode 100644
index 000000000..2278a8b3e
--- /dev/null
+++ b/src/List.svelte
@@ -0,0 +1,59 @@
+<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}