add caching to model avatar

src/lib/components/avatar.svelte

@@ -16,7 +16,7 @@
 	let orgName = $derived(_orgName ?? (!isCustom ? model.id.split("/")[0] : undefined));
 	let avatarUrl = $state<string>();
 
-	$effect(() => {
+	$effect.pre(() => {
 		avatarUrl = undefined;
 		getAvatarUrl(orgName).then(url => (avatarUrl = url));
 	});

src/lib/remote/avatar.remote.ts

@@ -1,4 +1,5 @@
 import { query } from "$app/server";
+import { withCache } from "$lib/utils/cache.js";
 import typia from "typia";
 
 type AvatarJson = {
@@ -7,9 +8,10 @@ type AvatarJson = {
 
 export const getAvatarUrl = query(
 	typia.createValidate<string | undefined>(),
-	async (orgName): Promise<string | undefined> => {
+	withCache(async (orgName): Promise<string | undefined> => {
 		if (!orgName) return;
 		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
+
 		const res = await fetch(url);
 		if (!res.ok) {
 			throw new Error(`Error getting avatar url for org: ${orgName}`);
@@ -19,5 +21,5 @@ export const getAvatarUrl = query(
 		typia.assert<AvatarJson>(json);
 		const { avatarUrl } = json;
 		return avatarUrl;
-	},
+	}),
 );

src/lib/utils/cache.ts

@@ -0,0 +1,29 @@
+type WithCacheOptions = {
+	// Lifespan of the cache in milliseconds
+	// @default 10 minutes
+	lifespan?: number;
+};
+
+export function withCache<Args extends unknown[], Return>(
+	fn: (...args: Args) => Return,
+	options?: WithCacheOptions,
+): (...args: Args) => Return {
+	const { lifespan = 1000 * 60 * 10 } = options ?? {};
+
+	const cache = new Map<string, Return>();
+
+	return (...args: Args) => {
+		const key = JSON.stringify(args);
+		if (cache.has(key)) {
+			return cache.get(key) as Return;
+		}
+
+		const value = fn(...args);
+		cache.set(key, value);
+		setTimeout(() => {
+			cache.delete(key);
+		}, lifespan);
+
+		return value;
+	};
+}