From 3fed861a77aa87395bc1b69c0531151baaca4860 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 14 Jan 2026 11:40:29 +0100
Subject: [PATCH] fix: clear animation timeout on navigation to prevent border
 flash

---
 src/app.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 03ff091..8a5e3d7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -10,7 +10,8 @@ const state = {
 		disableFeedbackErrors: false,
 		skipResetCodeConfirmation: false
 	},
-	showExpected: false
+	showExpected: false,
+	animationTimeout: null
 };
 
 // DOM elements - updated for new layout
@@ -341,6 +342,11 @@ function selectLesson(moduleId, lessonIndex) {
 // ================= LESSON LOADING =================
 
 function resetSuccessIndicators() {
+	// Clear any pending animation timeout
+	if (state.animationTimeout) {
+		clearTimeout(state.animationTimeout);
+		state.animationTimeout = null;
+	}
 	elements.codeEditor.classList.remove("success-highlight");
 	elements.lessonTitle.classList.remove("success-text");
 	elements.nextBtn.classList.remove("success");
@@ -649,11 +655,12 @@ function runCode() {
 		elements.previewWrapper?.style.setProperty("--crispy-quote", `"${randomQuote}"`);
 		elements.previewWrapper?.classList.add("matched");
 		elements.previewSection?.classList.add("matched");
-		setTimeout(() => {
+		state.animationTimeout = setTimeout(() => {
 			elements.previewWrapper?.classList.remove("matched");
 			elements.previewSection?.classList.remove("matched");
 			// Keep the gradient border visible after animation
 			elements.previewWrapper?.classList.add("completed-glow");
+			state.animationTimeout = null;
 		}, 3500);
 
 		updateNavigationButtons();