Opening the Recruitment Inbox showed skeleton placeholders every time, and
on the combined All channel it showed them stacked ABOVE rows that had
already arrived — the channel ORs its two sources' pending flags together,
so the email rows sat under placeholders while the sheet fetch finished.
The queue is a local table, not a live feed. Rows only appear when the Sync
worker writes them, and that path already invalidates qk.mailbox.all(). So
refetching on every visit bought nothing and cost a full-width skeleton each
time — worse on the All channel, which fetches BOTH sources unpaged and so
re-downloaded thousands of rows to render ten.
- LIST_CACHE / COUNT_CACHE: 10 min staleTime, 1 h gcTime, keepPreviousData.
A revisit inside the window paints rows immediately and issues no request.
- Placeholders now mean "nothing to show yet": gated on the list being
empty. A refetch over live rows is a 2px bar and the word "Updating…",
with the rows readable and clickable throughout.
- "Updated 4 min ago" + a Refresh button under the search box, because a
cached list that never admits its age reads as a broken list. Refresh
re-reads the DB; Sync pulls new mail from Outlook. Both tooltips now say
which is which — two circular arrows were indistinguishable.
- Search debounced to 300ms. Each keystroke used to mint a query key, a
request and a skeleton, so the list strobed while you typed.
- resume_text dropped from the list row mapping. serialize_application
ships the whole extracted CV on every row and the queue renders none of
it; caching a thousand of them for an hour is not a trade worth making.
The detail query fetches it for the one row actually open.
Trade-off: a sync run started elsewhere is now invisible here for up to ten
minutes. The age label and the Refresh button are the deliberate mitigation.
inbox-loading.test.mjs pins all of it, driving hand-gated fetches so the
frames a fast API flashes past become assertable: both sources pending, one
source home, and a second visit served from cache. Reverting the placeholder
rule reproduces the original defect as "skeleton=true rows=2". Wired into
npm run verify; needed a mountRoute export on the smoke harness, since
renderRoute tears the tree down before those intermediate frames can be read.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
New shared lib/exportXlsx.js: every Export button now downloads a
dashboard-flavoured .xlsx - deep-green title band with lime text, mint
meta row (view, row count, date), ink-teal header row, zebra data rows,
frozen header and autofilter. exceljs is imported dynamically so its
~1MB chunk only downloads when an export is clicked.
- Inbox: exports the loaded view (DB-filtered; no extra request)
- Candidates: the Export button was a stub that only fired a toast -
it now really exports the filtered account list
- Talent Pool: upgraded from plain CSV to the same styled workbook
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Audited all 25 routes at 320/375/390/430/768 with browser automation.
Root cause of most overflows: grid items default min-width:auto, so one
wide intrinsic child (a select option, the 620px RBAC matrix) pushed
whole cards past the viewport.
- .grid > * / .rbac-layout > * min-width:0 (CV Import, Interviews,
Tasks, Access Control card blowouts)
- calendar: minmax(0,1fr) columns — SAT was clipped off-screen at 320
- .seg wraps (Tasks filters), .card-head wraps <=900
- sticky mobile table column: first column (identity), was nth-child(2)
- tooltips display:none until hover + .content overflow-x clip (killed
a 7px sideways wiggle from invisible tooltip boxes)
- Ask Analytics form: design-system input styling, stacks on phones
- bar/grouped-bar charts thin x labels by slot width (overlap on phones)
- Candidates sort label+select wrap as one unit
- new: mobile.test.mjs + npm run test:mobile (puppeteer-core devDep,
drives installed Chrome) — fails on sideways scroll or runtime errors
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Talha Ahmed
ahmed.mujtaba