studio: fix React hooks order -- move useMemo before early returns

The useMemo for sortedVariants was placed after the loading/error early
returns, which violated React's rules of hooks (hooks must be called in
the same order every render). Move it before the conditional returns.

Fixes: Minified React error #310
This commit is contained in:
Daniel Han 2026-03-15 06:02:22 +00:00
commit 10c4db04d8

View file

@ -191,21 +191,6 @@ function GgufVariantExpander({
[repoId, onSelect],
);
if (loading) {
return (
<div className="flex items-center gap-2 px-5 py-2">
<Spinner className="size-3 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Loading variants</span>
</div>
);
}
if (error) {
return (
<div className="px-5 py-2 text-xs text-destructive">{error}</div>
);
}
const sortedVariants = useMemo(() => {
if (!variants) return variants;
return [...variants].sort((a, b) => {
@ -223,6 +208,21 @@ function GgufVariantExpander({
});
}, [variants, defaultVariant, gpuGb]);
if (loading) {
return (
<div className="flex items-center gap-2 px-5 py-2">
<Spinner className="size-3 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Loading variants</span>
</div>
);
}
if (error) {
return (
<div className="px-5 py-2 text-xs text-destructive">{error}</div>
);
}
if (!sortedVariants || sortedVariants.length === 0) {
return (
<div className="px-5 py-2 text-xs text-muted-foreground">