Stop the release-notes blink on variant clicks

[bharvey88]

Fixes the real cause of the variant-click flicker (follow-up to PR #23, which fixed a separate install-button churn but not the visible blip).

Instrumenting every render slot on the live page showed the blip is the "What's new" release-notes box: on every variant click, including clicking the already-selected variant, renderReleaseNotes did slot.innerHTML = '' and then re-fetched from the GitHub API, so the box went empty for a network round-trip and refilled. Two causes:

• The variant click handler had no guard, so clicking the already-active variant re-ran the whole pipeline (including that fetch).
• renderReleaseNotes blanked the box before fetching instead of swapping the content in place when the fetch returned.

The fix:

• No-op the click handler when the clicked variant is already selected.
• Stop blanking the release-notes box: leave the current notes visible until the new fetch resolves, then swap in place. The existing epoch guard still prevents stale/out-of-order writes.

Verified by re-instrumenting the fixed build: a same-variant click now produces zero DOM mutations anywhere (previously it emptied and refilled the box), and switching variants swaps the notes in a single in-place mutation that never leaves the box empty. New Playwright tests assert both: no extra GitHub API call on a same-variant click, and the release-notes slot never becomes empty during a switch. Full suite 26/26, validators green.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Prevented unnecessary refreshes when selecting the already active device variant.
  • Kept release notes visible while switching between device variants, avoiding a temporary blank state.

• Tests

  • Added coverage to verify reduced API requests and uninterrupted release-notes display during variant changes.

[coderabbitai]

Walkthrough

The device view now skips redundant same-variant refreshes and keeps existing release notes visible during asynchronous variant updates. Two Playwright tests verify request counts and prevent the release-notes slot from becoming empty.

Changes

Variant release-notes behavior

Layer / File(s)	Summary
Guard same-variant selection js/views/device.js, tests/installer.spec.js	Same-variant clicks return before incrementing the render epoch or triggering another release-notes fetch; a Playwright test verifies this behavior.
Preserve release notes during refresh js/views/device.js, tests/installer.spec.js	The release-notes slot is no longer cleared before asynchronous updates; a Playwright test verifies it never becomes empty during variant switching.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• ApolloAutomation/installer#13: Both changes update variant click handling and epoch-based asynchronous rendering.
• ApolloAutomation/installer#22: Both changes modify variant-selection updates in js/views/device.js.

Poem

A bunny clicks a button twice,
“No extra fetch!”—what blissful fix.
The notes stay snug inside their slot,
While variant changes tie the knot.
Hop, hop, the page stays bright!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: preventing release-notes flicker when device variants are clicked.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/variant-rerender-blink

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

js/views/device.js (1)

251-256: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Prevent redundant re-renders on same-channel clicks.

Just like the newly added early return for same-variant clicks, you can also prevent unnecessary DOM rebuilds and network fetches when the user clicks the already active channel.

♻️ Proposed refactor

   if (chanSeg) chanSeg.addEventListener('click', (e) => {
     const b = e.target.closest('button[data-channel]');
     if (!b) return;
+    if (b.dataset.channel === channel) return;
     channel = b.dataset.channel;
     variant = Object.keys(device.firmware[channel])[0];
     epoch++;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@js/views/device.js` around lines 251 - 256, Update the click handler for
chanSeg to return immediately when the clicked button’s data-channel matches the
currently active channel, before changing channel, selecting the firmware
variant, or incrementing epoch. Preserve the existing behavior for clicks that
select a different channel.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@js/views/device.js`:
- Around line 251-256: Update the click handler for chanSeg to return
immediately when the clicked button’s data-channel matches the currently active
channel, before changing channel, selecting the firmware variant, or
incrementing epoch. Preserve the existing behavior for clicks that select a
different channel.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 035640e7-2f6e-4a7e-9acd-6e8623b8e36a

📥 Commits

Reviewing files that changed from the base of the PR and between 95e8b29 and 195dcef.

📒 Files selected for processing (2)

• js/views/device.js
• tests/installer.spec.js