Add loading when hitting continue

This commit is contained in:
Nicolas Mowen 2025-10-23 07:31:31 -06:00
parent 82c236f349
commit 855021dfc4

View File

@ -47,6 +47,7 @@ export default function Step3ChooseExamples({
[imageName: string]: string; [imageName: string]: string;
}>(initialData?.imageClassifications || {}); }>(initialData?.imageClassifications || {});
const [isTraining, setIsTraining] = useState(false); const [isTraining, setIsTraining] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const { data: trainImages, mutate: refreshTrainImages } = useSWR<string[]>( const { data: trainImages, mutate: refreshTrainImages } = useSWR<string[]>(
hasGenerated ? `classification/${step1Data.modelName}/train` : null, hasGenerated ? `classification/${step1Data.modelName}/train` : null,
@ -135,6 +136,7 @@ export default function Step3ChooseExamples({
}, []); }, []);
const handleContinue = useCallback(async () => { const handleContinue = useCallback(async () => {
setIsProcessing(true);
try { try {
// Step 1: Create config for the new model // Step 1: Create config for the new model
const modelConfig: { const modelConfig: {
@ -220,6 +222,7 @@ export default function Step3ChooseExamples({
toast.error( toast.error(
t("wizard.step3.errors.classifyFailed", { error: errorMessage }), t("wizard.step3.errors.classifyFailed", { error: errorMessage }),
); );
setIsProcessing(false);
} }
}, [imageClassifications, step1Data, step2Data, t]); }, [imageClassifications, step1Data, step2Data, t]);
@ -347,8 +350,14 @@ export default function Step3ChooseExamples({
onClick={handleContinue} onClick={handleContinue}
variant="select" variant="select"
className="flex items-center justify-center gap-2 sm:flex-1" className="flex items-center justify-center gap-2 sm:flex-1"
disabled={!hasGenerated || isGenerating || !allImagesClassified} disabled={
!hasGenerated ||
isGenerating ||
!allImagesClassified ||
isProcessing
}
> >
{isProcessing && <ActivityIndicator className="size-4" />}
{t("button.continue", { ns: "common" })} {t("button.continue", { ns: "common" })}
</Button> </Button>
</div> </div>