Fix cross-language data corruption and remove loading flash on language switch

Author: Edwinexd

src/App.tsx

@@ -55,7 +55,7 @@ import LanguageSelector from "./LanguageSelector";
 import { getQuestion } from "./QuestionSelector";
 
 function App() {
-  const { lang, t, questions, dbArrayBuffer, defaultQuery, isLoading } = useLanguage();
+  const { lang, t, questions, dbArrayBuffer, defaultQuery } = useLanguage();
   const [question, setQuestion] = useState<Question>();
   const [database, setDatabase] = useState<initSqlJs.Database>();
   const [error, setError] = useState<string | null>(null);
@@ -205,10 +205,20 @@ function App() {
     }
   }, [question]);
 
+  // Track which language the current question was loaded in
+  const questionLangRef = useRef(lang);
+  useEffect(() => {
+    if (question) questionLangRef.current = lang;
+  }, [question, lang]);
+
   useEffect(() => {
     if (!database || !question || query === undefined) {
       return;
     }
+    // Don't write to localStorage if lang changed but question hasn't been cleared yet
+    if (questionLangRef.current !== lang) {
+      return;
+    }
     let wq = JSON.parse(localStorage.getItem(langKey(lang, "writtenQuestions")) || "[]");
     const initialLength = wq.length;
     if (query === defaultQuery || query === "") {
@@ -382,6 +392,9 @@ function App() {
     if (!result || !question || evaluatedQuery !== query) {
       return;
     }
+    if (questionLangRef.current !== lang) {
+      return;
+    }
     const matchesPrimary = isCorrectResult(question.evaluable_result, result);
     const matchedAlt = !matchesPrimary ? question.alternative_evaluable_results?.find(alt => isCorrectResult(alt, result)) : undefined;
     if (!matchesPrimary && !matchedAlt) {
@@ -781,17 +794,6 @@ function App() {
     });
   }, [evaluatedQuery, exportQuery, exportRendererRef, getTheme, isDarkMode, exportingStatus, question, resetResult, setTheme, exportQuestion, exportView]);
 
-  if (isLoading) {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <h1 className="text-6xl font-semibold my-3">SQL Validator</h1>
-          <p className="text-base text-gray-500">Loading...</p>
-        </header>
-      </div>
-    );
-  }
-
   return (
     <div className="App">
       {exportQuestion && exportQuery && <ExportRenderer query={{isCorrect: isCorrectResult(exportQuestion.evaluable_result, evalSql(exportQuery)) || (exportQuestion.alternative_evaluable_results?.some(alt => isCorrectResult(alt, evalSql(exportQuery))) ?? false), question: exportQuestion, code: exportQuery, result: evalSql(exportQuery)}} ref={exportRendererRef} />}

src/i18n/context.tsx

@@ -33,8 +33,6 @@ interface LanguageContextValue {
   dbArrayBuffer: ArrayBuffer | null;
   /** Default query for the current language */
   defaultQuery: string;
-  /** Whether language data is currently loading */
-  isLoading: boolean;
 }
 
 const LanguageContext = createContext<LanguageContextValue | null>(null);
@@ -78,10 +76,8 @@ export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   const [questions, setQuestions] = useState<QuestionCategory[]>([]);
   const [dbArrayBuffer, setDbArrayBuffer] = useState<ArrayBuffer | null>(null);
   const [defaultQuery, setDefaultQuery] = useState("SELECT * FROM Student;");
-  const [isLoading, setIsLoading] = useState(true);
 
   const loadLanguageData = useCallback(async (langCode: string) => {
-    setIsLoading(true);
     try {
       const [qpResponse, dbResponse] = await Promise.all([
         fetch(`/languages/${langCode}/questionpool.json`),
@@ -101,8 +97,6 @@ export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ chil
       setDbArrayBuffer(dbData);
     } catch (e) {
       console.error("Failed to load language data:", e);
-    } finally {
-      setIsLoading(false);
     }
   }, []);
 
@@ -131,7 +125,7 @@ export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   }, [lang]);
 
   return (
-    <LanguageContext.Provider value={{ lang, setLang, t, questions, dbArrayBuffer, defaultQuery, isLoading }}>
+    <LanguageContext.Provider value={{ lang, setLang, t, questions, dbArrayBuffer, defaultQuery }}>
       {children}
     </LanguageContext.Provider>
   );