public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: prevent Loading text flash on page load

Browse Source 
- 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
This commit is contained in:
Michael Czechowski
2025-12-30 20:53:38 +01:00
parent ef98e1aa96
commit e0f5fbc45c
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.js
View File

@@ -214,9 +214,12 @@ function restoreLessonCache() {
const data = JSON.parse(cached); const data = JSON.parse(cached);
if (data.moduleTitle && elements.moduleName) { if (data.moduleTitle && elements.moduleName) {
elements.moduleName.textContent = data.moduleTitle; elements.moduleName.textContent = data.moduleTitle;
// Remove data-i18n so applyTranslations won't overwrite
elements.moduleName.removeAttribute("data-i18n");
} }
if (data.lessonTitle && elements.lessonTitle) { if (data.lessonTitle && elements.lessonTitle) {
elements.lessonTitle.textContent = data.lessonTitle; elements.lessonTitle.textContent = data.lessonTitle;
elements.lessonTitle.removeAttribute("data-i18n");
} }
if (data.lessonDescription && elements.lessonDescription) { if (data.lessonDescription && elements.lessonDescription) {
elements.lessonDescription.innerHTML = data.lessonDescription; elements.lessonDescription.innerHTML = data.lessonDescription;

4
src/index.html
View File

@@ -30,7 +30,7 @@
<!-- Left Panel: Instructions + Editor --> <!-- Left Panel: Instructions + Editor -->
<div class="left-panel"> <div class="left-panel">
<section class="instructions"> <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="task-instruction" id="task-instruction"></div>
<div class="lesson-description" id="lesson-description" data-i18n="selectLesson"> <div class="lesson-description" id="lesson-description" data-i18n="selectLesson">
Please select a lesson to begin. Please select a lesson to begin.
@@ -77,7 +77,7 @@
<div class="game-controls"> <div class="game-controls">
<button id="prev-btn" class="btn" data-i18n="previous">Previous</button> <button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
<span class="module-pill" id="module-pill"> <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 class="level-indicator" id="level-indicator">1 of 3</span>
</span> </span>
<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button> <button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>