Keep vote UI rendered while syncing scores

wwwroot/app.js

@@ -5,11 +5,13 @@ const state = {
   authMode: "login",
   me: null,
   phase: null,
+  prevPhase: null,
   counts: null,
   mySuggestions: [],
   allSuggestions: [],
   myVotes: [],
-  results: []
+  results: [],
+  votesRendered: false
 };
 
 const $ = (id) => document.getElementById(id);
@@ -56,11 +58,13 @@ function setAuthMode(mode) {
 function clearUserState() {
   state.me = null;
   state.phase = null;
+  state.prevPhase = null;
   state.counts = null;
   state.mySuggestions = [];
   state.allSuggestions = [];
   state.myVotes = [];
   state.results = [];
+  state.votesRendered = false;
   const adminCard = $("admin-card");
   if (adminCard) adminCard.classList.add("hidden");
 }
@@ -80,8 +84,12 @@ async function loadState() {
   const [me, stateData] = await Promise.all([api.me(), api.state()]);
   state.isAuthenticated = true;
   state.me = me;
+  state.prevPhase = state.phase;
   state.phase = stateData.currentPhase;
   state.counts = stateData;
+  if (state.prevPhase !== state.phase && state.phase === "Vote") {
+    state.votesRendered = false;
+  }
   setAuthUI(true);
   renderWelcome();
   renderPhasePill();
@@ -103,10 +111,14 @@ async function loadRevealData() {
 
 async function loadVoteData() {
   if (state.phase !== "Vote") return;
-  // avoid re-rendering vote cards mid-drag: only update scores map
   const votes = await api.myVotes();
   state.myVotes = votes;
-  syncVoteScores();
+  if (!state.votesRendered) {
+    renderVotes();
+    state.votesRendered = true;
+  } else {
+    syncVoteScores();
+  }
 }
 
 async function loadResults() {
@@ -196,6 +208,18 @@ function renderVotes() {
   });
 }
 
+function syncVoteScores() {
+  const votesMap = Object.fromEntries(state.myVotes.map((v) => [v.suggestionId, v.score]));
+  Object.entries(votesMap).forEach(([id, score]) => {
+    const slider = document.querySelector(`input[type=range][data-id="${id}"]`);
+    const scoreLabel = $("score-" + id);
+    if (slider && score != null) {
+      slider.value = score;
+      if (scoreLabel) scoreLabel.textContent = score;
+    }
+  });
+}
+
 function renderResults() {
   const container = $("results-list");
   container.innerHTML = "";
@@ -381,8 +405,12 @@ async function refreshPhaseData() {
   try {
     await loadState();
     await Promise.all([loadSuggestData(), loadRevealData(), loadResults()]);
-    // vote data only refreshes via explicit calls to avoid interrupting slider drags
-    if (state.phase !== "Vote") {
+    if (state.phase === "Vote") {
+      if (!state.votesRendered) {
+        await loadVoteData();
+      }
+    } else {
+      state.votesRendered = false;
       await loadVoteData();
     }
   } catch (err) {