perf(web): compute font-picker options once at module scope

This commit is contained in:
Amruth Pillai
2026-07-08 15:51:25 +02:00
parent 73daf22b2f
commit 7e06579461
@@ -5,11 +5,9 @@ import { cn } from "@reactive-resume/utils/style";
import { Combobox } from "@/components/ui/combobox"; import { Combobox } from "@/components/ui/combobox";
import { FontDisplay } from "./font-display"; import { FontDisplay } from "./font-display";
type FontFamilyComboboxProps = Omit<SingleComboboxProps, "options">; // Options depend only on the static font list, so compute them once per process
// instead of per component instance (the body + heading pickers rendered identical output twice).
export function FontFamilyCombobox({ className, ...props }: FontFamilyComboboxProps) { const FONT_FAMILY_OPTIONS = fontList.map((font) => ({
const options = useMemo(() => {
return fontList.map((font) => ({
value: font.family, value: font.family,
keywords: getFontSearchKeywords(font.family), keywords: getFontSearchKeywords(font.family),
label: ( label: (
@@ -21,9 +19,11 @@ export function FontFamilyCombobox({ className, ...props }: FontFamilyComboboxPr
/> />
), ),
})); }));
}, []);
return <Combobox {...props} options={options} className={cn("w-full", className)} />; type FontFamilyComboboxProps = Omit<SingleComboboxProps, "options">;
export function FontFamilyCombobox({ className, ...props }: FontFamilyComboboxProps) {
return <Combobox {...props} options={FONT_FAMILY_OPTIONS} className={cn("w-full", className)} />;
} }
type FontWeightComboboxProps = Omit<MultiComboboxProps, "options" | "multiple"> & { fontFamily: string }; type FontWeightComboboxProps = Omit<MultiComboboxProps, "options" | "multiple"> & { fontFamily: string };