perf(manga): progressively hydrate native chapter counts

1 files changed, 19 insertions, 2 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index fb41253c..56de1df1 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -1,3 +1,18 @@
+<script context="module" lang="ts">
+import proxy from "$lib/Utility/proxy";
+
+let mangadexServiceStatusResponse: Promise<Response> | undefined;
+
+const getMangadexServiceStatus = () => {
+	if (!mangadexServiceStatusResponse)
+		mangadexServiceStatusResponse = fetch(
+			proxy("https://api.mangadex.org/ping"),
+		);
+
+	return mangadexServiceStatusResponse;
+};
+</script>
+
 <script lang="ts">
 import Spacer from "$lib/Layout/Spacer.svelte";
 import type { Media } from "$lib/Data/AniList/media";
@@ -10,7 +25,6 @@ import root from "$lib/Utility/root";
 import locale from "$stores/locale";
 import Skeleton from "$lib/Loading/Skeleton.svelte";
 import { browser } from "$app/environment";
-import proxy from "$lib/Utility/proxy";
 import "../covers.css";
 import CleanGrid from "../CleanGrid.svelte";
 import CleanList from "../CleanList.svelte";
@@ -84,7 +98,7 @@ const updateSelectedList = (event: Event) => {
 };
 
 onMount(async () => {
-	serviceStatusResponse = fetch(proxy("https://api.mangadex.org/ping"));
+	if (rateLimited) serviceStatusResponse = getMangadexServiceStatus();
 
 	if (browser)
 		await localforage.setItem(
@@ -93,6 +107,9 @@ onMount(async () => {
 		);
 });
 
+$: if (rateLimited && !serviceStatusResponse)
+	serviceStatusResponse = getMangadexServiceStatus();
+
 const increment = (manga: Media) => {
 	if (!(pendingUpdate === manga.id || dummy))
 		updateMedia(manga.id, manga.mediaListEntry?.progress, media);