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:
parent
3c1b8d7ab7
commit
10c4db04d8
1 changed files with 15 additions and 15 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue