From cc6fafee1061dde092db4cf05ee829183b3214b7 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 30 Dec 2025 20:53:38 +0100
Subject: [PATCH] fix: prevent Loading text flash on page load

- Remove data-i18n="loading" from lesson title and module name
- Start with empty content instead of "Loading..." placeholder
- Remove data-i18n attribute after restoring cache to prevent overwrites
---
 src/app.js     | 3 +++
 src/index.html | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 7d94024..9687aba 100644
--- a/src/app.js
+++ b/src/app.js
@@ -214,9 +214,12 @@ function restoreLessonCache() {
 			const data = JSON.parse(cached);
 			if (data.moduleTitle && elements.moduleName) {
 				elements.moduleName.textContent = data.moduleTitle;
+				// Remove data-i18n so applyTranslations won't overwrite
+				elements.moduleName.removeAttribute("data-i18n");
 			}
 			if (data.lessonTitle && elements.lessonTitle) {
 				elements.lessonTitle.textContent = data.lessonTitle;
+				elements.lessonTitle.removeAttribute("data-i18n");
 			}
 			if (data.lessonDescription && elements.lessonDescription) {
 				elements.lessonDescription.innerHTML = data.lessonDescription;
diff --git a/src/index.html b/src/index.html
index 6f606f2..5184cbb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
 				<!-- Left Panel: Instructions + Editor -->
 				<div class="left-panel">
 					<section class="instructions">
-						<h2 id="lesson-title" data-i18n="loading">Loading...</h2>
+						<h2 id="lesson-title"></h2>
 						<div class="task-instruction" id="task-instruction"></div>
 						<div class="lesson-description" id="lesson-description" data-i18n="selectLesson">
 							Please select a lesson to begin.
@@ -77,7 +77,7 @@
 					<div class="game-controls">
 						<button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
 						<span class="module-pill" id="module-pill">
-							<span class="module-name" data-i18n="loading">Loading...</span>
+							<span class="module-name"></span>
 							<span class="level-indicator" id="level-indicator">1 of 3</span>
 						</span>
 						<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>