v0.2.9: fix tab-switch render race (unknown faces could appear under the Ignored tab)

Author: skycryer

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to FaceID. The Home Assistant add-on shows this file in the
 update dialog; standalone users can watch GitHub releases.
 
+## 0.2.9 — 2026-07-23
+
+- **Fix: tab content race** — switching tabs while a fetch was still in flight
+  could let the finishing request overwrite the newly opened tab (e.g. freshly
+  detected unknown faces appeared under the Ignored tab). Each view now only
+  renders if its tab is still active.
+
 ## 0.2.8 — 2026-07-22
 
 - **Fix: fresh installs and updates crashed on start** (`ImportError:

faceid-addon/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to FaceID. The Home Assistant add-on shows this file in the
 update dialog; standalone users can watch GitHub releases.
 
+## 0.2.9 — 2026-07-23
+
+- **Fix: tab content race** — switching tabs while a fetch was still in flight
+  could let the finishing request overwrite the newly opened tab (e.g. freshly
+  detected unknown faces appeared under the Ignored tab). Each view now only
+  renders if its tab is still active.
+
 ## 0.2.8 — 2026-07-22
 
 - **Fix: fresh installs and updates crashed on start** (`ImportError:

faceid-addon/config.yaml

@@ -1,5 +1,5 @@
 name: FaceID
-version: "0.2.8"
+version: "0.2.9"
 slug: faceid
 description: Face recognition for Frigate — trainable gallery, clustered unknown review, HA sensors
 url: https://github.com/SkyTechNerds/faceid

faceid-addon/static/index.html

@@ -100,7 +100,9 @@ <h1>FACEID</h1>
 function personOptions(){return Object.entries(persons).map(([s,p])=>`<option value="${s}">${esc(p.name)}</option>`).join('')}
 
 async function render(){
+  const t=tab;
   persons=await j('api/persons');
+  if(t!==tab)return;
   if(tab==='unknowns')return renderUnknowns();
   if(tab==='persons')return renderPersons();
   if(tab==='ignored')return renderIgnored();
@@ -136,6 +138,7 @@ <h1>FACEID</h1>
 }
 async function renderUnknowns(){
   const [clusters,bf]=await Promise.all([j('api/unknowns'),j('api/backfill')]);
+  if(tab!=='unknowns')return;
   if(bf.running&&tab==='unknowns')setTimeout(()=>{if(tab==='unknowns')render()},4000);
   if(!clusters.length){
     main.innerHTML=backfillRow(bf)+'<div class="empty">No unknown faces in the queue.</div>';return}
@@ -167,6 +170,7 @@ <h1>FACEID</h1>
 }
 async function renderIgnored(){
   const clusters=await j('api/ignored');
+  if(tab!=='ignored')return;
   if(!clusters.length){main.innerHTML='<div class="empty">Nobody on the ignore list. Use "ignore" on an unknown cluster or "ignore person" on a person card — ignored people are never notified, matched or resurfaced.</div>';return}
   const total=clusters.reduce((a,c)=>a+c.length,0);
   main.innerHTML=`<div class="row"><span class="stat">${total} anchor face(s) in ${clusters.length} group(s) — never notified, never matched to a known person, never resurfaced.</span></div>`
@@ -278,6 +282,7 @@ <h1>FACEID</h1>
 }
 
 async function renderPersons(){
+  if(tab!=='persons')return;
   const entries=Object.entries(persons);
   main.innerHTML=`
     <div class="row">
@@ -324,6 +329,7 @@ <h1>FACEID</h1>
 
 async function renderRecent(){
   const rows=await j('api/recent');
+  if(tab!=='recent')return;
   main.innerHTML=rows.length?`<table>
     <tr><th>Time</th><th>Camera</th><th>Person</th><th>Score</th><th>Event</th></tr>
     ${rows.map(r=>`<tr><td>${fmtTs(r.ts)}</td><td>${esc(r.camera)}</td>

static/index.html

@@ -100,7 +100,9 @@ <h1>FACEID</h1>
 function personOptions(){return Object.entries(persons).map(([s,p])=>`<option value="${s}">${esc(p.name)}</option>`).join('')}
 
 async function render(){
+  const t=tab;
   persons=await j('api/persons');
+  if(t!==tab)return;
   if(tab==='unknowns')return renderUnknowns();
   if(tab==='persons')return renderPersons();
   if(tab==='ignored')return renderIgnored();
@@ -136,6 +138,7 @@ <h1>FACEID</h1>
 }
 async function renderUnknowns(){
   const [clusters,bf]=await Promise.all([j('api/unknowns'),j('api/backfill')]);
+  if(tab!=='unknowns')return;
   if(bf.running&&tab==='unknowns')setTimeout(()=>{if(tab==='unknowns')render()},4000);
   if(!clusters.length){
     main.innerHTML=backfillRow(bf)+'<div class="empty">No unknown faces in the queue.</div>';return}
@@ -167,6 +170,7 @@ <h1>FACEID</h1>
 }
 async function renderIgnored(){
   const clusters=await j('api/ignored');
+  if(tab!=='ignored')return;
   if(!clusters.length){main.innerHTML='<div class="empty">Nobody on the ignore list. Use "ignore" on an unknown cluster or "ignore person" on a person card — ignored people are never notified, matched or resurfaced.</div>';return}
   const total=clusters.reduce((a,c)=>a+c.length,0);
   main.innerHTML=`<div class="row"><span class="stat">${total} anchor face(s) in ${clusters.length} group(s) — never notified, never matched to a known person, never resurfaced.</span></div>`
@@ -278,6 +282,7 @@ <h1>FACEID</h1>
 }
 
 async function renderPersons(){
+  if(tab!=='persons')return;
   const entries=Object.entries(persons);
   main.innerHTML=`
     <div class="row">
@@ -324,6 +329,7 @@ <h1>FACEID</h1>
 
 async function renderRecent(){
   const rows=await j('api/recent');
+  if(tab!=='recent')return;
   main.innerHTML=rows.length?`<table>
     <tr><th>Time</th><th>Camera</th><th>Person</th><th>Score</th><th>Event</th></tr>
     ${rows.map(r=>`<tr><td>${fmtTs(r.ts)}</td><td>${esc(r.camera)}</td>