feat: optimize state updates using flushSync for smoother exam transitions
Release Pipeline / build-and-release (push) Successful in 5m52s

This commit is contained in:
LaurensBartelds committed 2026-04-25 13:30:34 +02:00
1 parent 107ebf4d47
commit 29d9264cfb
1 file changed
+28 -17
+28 -17
View File
@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react";
import { flushSync } from "react-dom";
import {
useNavigate,
useLocation,
@@ -136,15 +137,17 @@ function AppInner() {
tweaks.feedbackMode === "auto"
? (data.feedbackMode ?? "end")
: tweaks.feedbackMode;
setExam(data);
setExamState({
currentIdx: 0,
answers: {},
flags: {},
notes: "",
revealed: {},
startedAt: Date.now(),
feedbackMode: fm,
flushSync(() => {
setExam(data);
setExamState({
currentIdx: 0,
answers: {},
flags: {},
notes: "",
revealed: {},
startedAt: Date.now(),
feedbackMode: fm,
});
});
navigate(`/exam/${slugify(data.title)}/q1`);
};
@@ -152,8 +155,10 @@ function AppInner() {
const resume = () => {
const saved = loadState();
if (saved?.exam && saved?.state) {
setExam(saved.exam);
setExamState(withNotes(saved.state));
flushSync(() => {
setExam(saved.exam);
setExamState(withNotes(saved.state));
});
navigate(
`/exam/${slugify(saved.exam.title)}/q${saved.state.currentIdx + 1}`,
);
@@ -235,18 +240,24 @@ function AppInner() {
completedAt: number;
}>(`/api/results/${remoteId}`)
.then((data) => {
setExam(data.exam);
setExamState(withNotes(data.state));
flushSync(() => {
setExam(data.exam);
setExamState(withNotes(data.state));
});
navigate(`/review/${slugify(entry.title)}`);
})
.catch(() => {
setExam(entry.exam);
setExamState(withNotes(entry.state));
flushSync(() => {
setExam(entry.exam);
setExamState(withNotes(entry.state));
});
navigate(`/review/${slugify(entry.title)}`);
});
} else {
setExam(entry.exam);
setExamState(withNotes(entry.state));
flushSync(() => {
setExam(entry.exam);
setExamState(withNotes(entry.state));
});
navigate(`/review/${slugify(entry.title)}`);
}
};