elias/core
1
0
Fork 0
mirror of https://github.com/eliasstepanik/core.git synced 2026-01-24 02:08:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show loading in onboarding form

Browse Source
This commit is contained in:
Harshith Mullapudi 2025-09-22 22:26:18 +05:30
parent 62fdf6181a
commit 1509e8d502
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/webapp/app/components/onboarding/onboarding-question.tsx
View File

@ -15,6 +15,7 @@ interface OnboardingQuestionProps {
isLast: boolean; isLast: boolean;
currentStep: number; currentStep: number;
totalSteps: number; totalSteps: number;
loading?: boolean;
} }
export default function OnboardingQuestionComponent({ export default function OnboardingQuestionComponent({
@ -27,6 +28,7 @@ export default function OnboardingQuestionComponent({
isLast, isLast,
currentStep, currentStep,
totalSteps, totalSteps,
loading,
}: OnboardingQuestionProps) { }: OnboardingQuestionProps) {
const [selectedValue, setSelectedValue] = useState<string | string[]>( const [selectedValue, setSelectedValue] = useState<string | string[]>(
answer || (question.type === "multi-select" ? [] : ""), answer || (question.type === "multi-select" ? [] : ""),
@ -148,6 +150,7 @@ export default function OnboardingQuestionComponent({
variant="secondary" variant="secondary"
size="xl" size="xl"
onClick={onNext} onClick={onNext}
isLoading={!!loading}
disabled={!isValid()} disabled={!isValid()}
className="rounded-lg px-4 py-2" className="rounded-lg px-4 py-2"
> >

19
apps/webapp/app/routes/onboarding.tsx
View File

@ -85,7 +85,7 @@ export async function action({ request }: ActionFunctionArgs) {
export default function Onboarding() { export default function Onboarding() {
const { user } = useLoaderData<typeof loader>(); const { user } = useLoaderData<typeof loader>();
const submit = useSubmit(); const submit = useSubmit();
const [loading, setLoading] = useState(false); // Add loading state
const [currentQuestion, setCurrentQuestion] = useState(0); const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState<OnboardingAnswer[]>([]); const [answers, setAnswers] = useState<OnboardingAnswer[]>([]);
// Initialize with default identity statement converted to triplets // Initialize with default identity statement converted to triplets
@ -152,6 +152,7 @@ export default function Onboarding() {
if (currentQuestion < ONBOARDING_QUESTIONS.length - 1) { if (currentQuestion < ONBOARDING_QUESTIONS.length - 1) {
setCurrentQuestion(currentQuestion + 1); setCurrentQuestion(currentQuestion + 1);
} else { } else {
setLoading(true);
// Submit all answers // Submit all answers
submitAnswers(); submitAnswers();
} }
@ -164,12 +165,17 @@ export default function Onboarding() {
}; };
const submitAnswers = async () => { const submitAnswers = async () => {
const formData = new FormData(); try {
formData.append("answers", JSON.stringify(answers)); const formData = new FormData();
formData.append("answers", JSON.stringify(answers));
submit(formData, { submit(formData, {
method: "POST", method: "POST",
}); });
setLoading(false);
} catch (e) {
setLoading(false);
}
}; };
// Convert episode and statements structure to triplets for visualization // Convert episode and statements structure to triplets for visualization
@ -243,6 +249,7 @@ export default function Onboarding() {
onAnswer={handleAnswer} onAnswer={handleAnswer}
onNext={handleNext} onNext={handleNext}
onPrevious={handlePrevious} onPrevious={handlePrevious}
loading={loading}
isFirst={currentQuestion === 0} isFirst={currentQuestion === 0}
isLast={currentQuestion === ONBOARDING_QUESTIONS.length - 1} isLast={currentQuestion === ONBOARDING_QUESTIONS.length - 1}
currentStep={currentQuestion + 1} currentStep={currentQuestion + 1}