feat(list): loading ui changes

2 files changed, 30 insertions, 16 deletions

diff --git a/src/lib/List/Due/AnimeList.svelte b/src/lib/List/Due/AnimeList.svelte
index 45b5eb11..f9e7d11e 100644
--- a/src/lib/List/Due/AnimeList.svelte
+++ b/src/lib/List/Due/AnimeList.svelte
@@ -107,17 +107,19 @@
 </script>
 
 {#await animeLists}
-	<summary>Anime</summary>
+	<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>
 
 	<ul><li>Loading ...</li></ul>
 {:then media}
+	{@const cleanedMedia = cleanMedia(media, displayUnresolved)}
+
 	<summary
-		>Anime [{cleanMedia(media, displayUnresolved).length}]
+		>Anime [{cleanedMedia.length}]
 		<small style="opacity: 50%">{endTime / 1000}s</small></summary
 	>
 
 	<ul>
-		{#each cleanMedia(media, displayUnresolved) as anime}
+		{#each cleanedMedia as anime}
 			<li>
 				<a href={`https://anilist.co/anime/${anime['id']}`} target="_blank">
 					{anime['title']['english'] || anime['title']['romaji']}
@@ -131,4 +133,12 @@
 			</li>
 		{/each}
 	</ul>
+{:catch}
+	<ul>
+		<li>
+			Media could not be loaded. You might have been <a
+				href="https://en.wikipedia.org/wiki/Rate_limiting">rate limited</a
+			>.
+		</li>
+	</ul>
 {/await}
diff --git a/src/lib/List/Due/MangaList.svelte b/src/lib/List/Due/MangaList.svelte
index 7c7a285d..8f30772f 100644
--- a/src/lib/List/Due/MangaList.svelte
+++ b/src/lib/List/Due/MangaList.svelte
@@ -79,19 +79,21 @@
 </script>
 
 {#await mangaLists}
-	<summary>Manga</summary>
+	<summary>Manga [...] <small style="opacity: 50%">...s</small></summary>
 
 	<ul><li>Loading ...</li></ul>
 {:then media}
-	<summary>
-		Manga {#await cleanMedia(media, displayUnresolved) then count}[{count.length}]{/await}
-		<small style="opacity: 50%">{endTime / 1000}s</small>
-	</summary>
-
-	<ul>
-		{#await cleanMedia(media, displayUnresolved)}
-			<li>Loading ...</li>
-		{:then cleanedMedia}
+	{#await cleanMedia(media, displayUnresolved)}
+		<summary>Manga</summary>
+
+		<ul><li>Loading ...</li></ul>
+	{:then cleanedMedia}
+		<summary>
+			Manga [{cleanedMedia.length}]
+			<small style="opacity: 50%">{endTime / 1000}s</small>
+		</summary>
+
+		<ul>
 			{#each cleanedMedia as manga}
 				<li>
 					<a href={`https://anilist.co/manga/${manga['id']}`} target="_blank">
@@ -102,12 +104,14 @@
 					[{manga['episodes'] || '?'}]
 				</li>
 			{/each}
-		{:catch}
+		</ul>
+	{:catch}
+		<ul>
 			<li>
 				Media could not be loaded. You might have been <a
 					href="https://en.wikipedia.org/wiki/Rate_limiting">rate limited</a
 				>.
 			</li>
-		{/await}
-	</ul>
+		</ul>
+	{/await}
 {/await}