birdclaw 0.8.2 → 0.8.3

package/src/components/AccountSwitcher.tsx

@@ -1,7 +1,9 @@
 import { Check, ChevronDown } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { fetchQueryEnvelope } from "#/lib/api-client";
+import { queryKeys } from "#/lib/query-client";
 import type { AccountRecord } from "#/lib/types";
 import { cx } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
@@ -25,29 +27,19 @@ function avatarName(account: AccountRecord) {
 }
 
 export function AccountSwitcher({ action }: { action?: ReactNode } = {}) {
-	const [accounts, setAccounts] = useState<AccountRecord[]>([]);
 	const [open, setOpen] = useState(false);
 	const switcherRef = useRef<HTMLDivElement>(null);
+	const statusQuery = useQuery({
+		queryKey: queryKeys.status,
+		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
+	});
+	const accounts = statusQuery.data?.accounts ?? [];
 	const selectedAccountId = useSelectedAccountId(accounts);
 	const selectedAccount = useMemo(
 		() => accounts.find((account) => account.id === selectedAccountId),
 		[accounts, selectedAccountId],
 	);
 
-	useEffect(() => {
-		let active = true;
-		fetchQueryEnvelope()
-			.then((meta) => {
-				if (active) setAccounts(meta.accounts);
-			})
-			.catch(() => {
-				if (active) setAccounts([]);
-			});
-		return () => {
-			active = false;
-		};
-	}, []);
-
 	useEffect(() => {
 		if (!open) return;
 

package/src/components/AvatarChip.tsx

@@ -49,7 +49,7 @@ export function AvatarChip({
 	);
 }
 
-function avatarPath(profileId: string, avatarUrl: string) {
+export function avatarPath(profileId: string, avatarUrl: string) {
 	const query = new URLSearchParams({
 		profileId,
 		v: avatarUrl,

package/src/components/AvatarPreload.ts

@@ -0,0 +1,149 @@
+import { type RefObject, useEffect } from "react";
+import { avatarPath } from "./AvatarChip";
+
+const MAX_CONCURRENT_PRELOADS = 4;
+const IDLE_TIMEOUT_MS = 2500;
+const PRELOAD_ROOT_MARGIN = "800px 0px";
+
+const queuedSources: string[] = [];
+const knownSources = new Set<string>();
+const activeImages = new Set<HTMLImageElement>();
+
+let activePreloads = 0;
+let listeningForLoad = false;
+let idleId: number | null = null;
+let fallbackTimerId: number | null = null;
+
+function finishPreload(image: HTMLImageElement) {
+	if (!activeImages.delete(image)) return;
+	activePreloads -= 1;
+	drainPreloads();
+}
+
+function drainPreloads() {
+	while (activePreloads < MAX_CONCURRENT_PRELOADS && queuedSources.length > 0) {
+		const src = queuedSources.shift();
+		if (!src) return;
+
+		const image = new Image();
+		activePreloads += 1;
+		activeImages.add(image);
+		image.decoding = "async";
+		image.onerror = () => finishPreload(image);
+		image.onload = () => {
+			if (typeof image.decode !== "function") {
+				finishPreload(image);
+				return;
+			}
+			void image
+				.decode()
+				.catch(() => undefined)
+				.finally(() => finishPreload(image));
+		};
+		image.src = src;
+	}
+}
+
+function runIdlePreloads() {
+	idleId = null;
+	fallbackTimerId = null;
+	drainPreloads();
+}
+
+function scheduleIdlePreloads() {
+	if (
+		queuedSources.length === 0 ||
+		idleId !== null ||
+		fallbackTimerId !== null
+	) {
+		return;
+	}
+
+	const requestIdle = window.requestIdleCallback?.bind(window);
+	if (requestIdle) {
+		idleId = requestIdle(runIdlePreloads, {
+			timeout: IDLE_TIMEOUT_MS,
+		});
+		return;
+	}
+
+	fallbackTimerId = window.setTimeout(runIdlePreloads, 0);
+}
+
+function handleWindowLoad() {
+	listeningForLoad = false;
+	scheduleIdlePreloads();
+}
+
+function scheduleAfterPageLoad() {
+	if (document.readyState === "complete") {
+		scheduleIdlePreloads();
+		return;
+	}
+	if (listeningForLoad) return;
+	listeningForLoad = true;
+	window.addEventListener("load", handleWindowLoad, { once: true });
+}
+
+function queueAvatarPreload(profileId?: string, avatarUrl?: string) {
+	if (!profileId || !avatarUrl || typeof window === "undefined") return;
+	const src = avatarPath(profileId, avatarUrl);
+	if (knownSources.has(src)) return;
+	knownSources.add(src);
+	queuedSources.push(src);
+	scheduleAfterPageLoad();
+}
+
+export function useAvatarPreload(
+	reference: RefObject<Element | null>,
+	profileId?: string,
+	avatarUrl?: string,
+) {
+	useEffect(() => {
+		if (!profileId || !avatarUrl) return;
+		const node = reference.current;
+		if (!node || typeof IntersectionObserver === "undefined") {
+			queueAvatarPreload(profileId, avatarUrl);
+			return;
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (!entries.some((entry) => entry.isIntersecting)) return;
+				observer.disconnect();
+				queueAvatarPreload(profileId, avatarUrl);
+			},
+			{ rootMargin: PRELOAD_ROOT_MARGIN },
+		);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [avatarUrl, profileId, reference]);
+}
+
+function resetPreloader() {
+	if (listeningForLoad) {
+		window.removeEventListener("load", handleWindowLoad);
+	}
+	if (idleId !== null && "cancelIdleCallback" in window) {
+		window.cancelIdleCallback(idleId);
+	}
+	if (fallbackTimerId !== null) {
+		window.clearTimeout(fallbackTimerId);
+	}
+	for (const image of activeImages) {
+		image.onload = null;
+		image.onerror = null;
+	}
+	queuedSources.length = 0;
+	knownSources.clear();
+	activeImages.clear();
+	activePreloads = 0;
+	listeningForLoad = false;
+	idleId = null;
+	fallbackTimerId = null;
+}
+
+export const __test__ = {
+	queueAvatarPreload,
+	resetPreloader,
+};