perf: deduplicate OG data fetches across document cards

apps/web/components/memories-grid.tsx

@@ -1,4 +1,4 @@
 "use client"
 
 import { useAuth } from "@lib/auth-context"
 import { $fetch } from "@lib/api"
@@ -73,6 +73,36 @@
 	image?: string
 }
 
+const ogCache = new Map<string, OgData>()
+const ogInflight = new Map<string, Promise<OgData | null>>()
+
+function fetchOgData(url: string): Promise<OgData | null> {
+	const cached = ogCache.get(url)
+	if (cached) return Promise.resolve(cached)
+
+	const inflight = ogInflight.get(url)
+	if (inflight) return inflight
+
+	const promise = fetch(`/api/og?url=${encodeURIComponent(url)}`)
+		.then((res) => {
+			if (!res.ok) throw new Error("Failed")
+			return res.json()
+		})
+		.then((data) => {
+			const result: OgData = { title: data?.title, image: data?.image }
+			ogCache.set(url, result)
+			ogInflight.delete(url)
+			return result
+		})
+		.catch(() => {
+			ogInflight.delete(url)
+			return null
+		})
+
+	ogInflight.set(url, promise)
+	return promise
+}
+
 const PAGE_SIZE = 100
 const MAX_TOTAL = 1000
 
@@ -696,23 +726,9 @@
 		useEffect(() => {
 			if (needsOgData && !ogData && !isLoadingOg && document.url) {
 				setIsLoadingOg(true)
-				fetch(`/api/og?url=${encodeURIComponent(document.url)}`)
-					.then((res) => {
-						if (!res.ok) throw new Error("Failed")
-						return res.json()
-					})
-					.then((data) => {
-						setOgData({
-							title: data?.title,
-							image: data?.image,
-						})
-					})
-					.catch(() => {
-						setOgData({})
-					})
-					.finally(() => {
-						setIsLoadingOg(false)
-					})
+				fetchOgData(document.url)
+					.then((data) => { if (data) setOgData(data) })
+					.finally(() => setIsLoadingOg(false))
 			}
 		}, [needsOgData, ogData, isLoadingOg, document.url])