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 { useState, useEffect, useCallback } from "react";
import { flushSync } from "react-dom";
import { import {
useNavigate, useNavigate,
useLocation, useLocation,
@@ -136,15 +137,17 @@ function AppInner() {
tweaks.feedbackMode === "auto" tweaks.feedbackMode === "auto"
? (data.feedbackMode ?? "end") ? (data.feedbackMode ?? "end")
: tweaks.feedbackMode; : tweaks.feedbackMode;
setExam(data); flushSync(() => {
setExamState({ setExam(data);
currentIdx: 0, setExamState({
answers: {}, currentIdx: 0,
flags: {}, answers: {},
notes: "", flags: {},
revealed: {}, notes: "",
startedAt: Date.now(), revealed: {},
feedbackMode: fm, startedAt: Date.now(),
feedbackMode: fm,
});
}); });
navigate(`/exam/${slugify(data.title)}/q1`); navigate(`/exam/${slugify(data.title)}/q1`);
}; };
@@ -152,8 +155,10 @@ function AppInner() {
const resume = () => { const resume = () => {
const saved = loadState(); const saved = loadState();
if (saved?.exam && saved?.state) { if (saved?.exam && saved?.state) {
setExam(saved.exam); flushSync(() => {
setExamState(withNotes(saved.state)); setExam(saved.exam);
setExamState(withNotes(saved.state));
});
navigate( navigate(
`/exam/${slugify(saved.exam.title)}/q${saved.state.currentIdx + 1}`, `/exam/${slugify(saved.exam.title)}/q${saved.state.currentIdx + 1}`,
); );
@@ -235,18 +240,24 @@ function AppInner() {
completedAt: number; completedAt: number;
}>(`/api/results/${remoteId}`) }>(`/api/results/${remoteId}`)
.then((data) => { .then((data) => {
setExam(data.exam); flushSync(() => {
setExamState(withNotes(data.state)); setExam(data.exam);
setExamState(withNotes(data.state));
});
navigate(`/review/${slugify(entry.title)}`); navigate(`/review/${slugify(entry.title)}`);
}) })
.catch(() => { .catch(() => {
setExam(entry.exam); flushSync(() => {
setExamState(withNotes(entry.state)); setExam(entry.exam);
setExamState(withNotes(entry.state));
});
navigate(`/review/${slugify(entry.title)}`); navigate(`/review/${slugify(entry.title)}`);
}); });
} else { } else {
setExam(entry.exam); flushSync(() => {
setExamState(withNotes(entry.state)); setExam(entry.exam);
setExamState(withNotes(entry.state));
});
navigate(`/review/${slugify(entry.title)}`); navigate(`/review/${slugify(entry.title)}`);
} }
}; };