Skip to content

fix: resolve sidebar top-action icons synchronously to eliminate blank-icon frame#146

Merged
akuehner merged 1 commit into
mainfrom
fix/sidebar-icons-sync-resolution
May 19, 2026
Merged

fix: resolve sidebar top-action icons synchronously to eliminate blank-icon frame#146
akuehner merged 1 commit into
mainfrom
fix/sidebar-icons-sync-resolution

Conversation

@akuehner
Copy link
Copy Markdown
Member

Diagnosis

New Session and Agent Chat icons occasionally rendered as blank (invisible) because icon resolution was deferred via requestAnimationFrame. Between replaceChild (or the initial renderSessionList build) and the rAF firing, the browser could paint a frame with raw <i data-lucide> placeholders — no dimensions, no visible content.

Session-item icons don't exhibit this because they are rebuilt in a large batch; the rAF fires before a distinct paint of the top area is visible. The top-action buttons are a small targeted swap (via refreshSessionTopActions on vendor change) where the single-frame gap is perceptible.

Additionally, refreshIcons(el) was passing { nodes: [scope] } to lucide — an unrecognised option that lucide 0.468.0 silently ignores (falls back to full-document scan). The correct scoped API is { root: scope }.

Changes

  • icons.js: refreshIcons(el) is now synchronous — calls lucide.createIcons({ root: scope }) immediately, cancels any pending deferred scans (the sync pass covers them). The no-scope path (deferred full-doc rAF) is unchanged.
  • sidebar-sessions.js: renderSessionList() calls lucide.createIcons({ root: stickyTop }) synchronously after building the sticky-top node, before appending to the DOM. The deferred refreshIcons() at the end still covers the rest of the list.

…k-icon frame

Two changes:

1. icons.js — refreshIcons(el) is now synchronous. Previously it deferred
   via requestAnimationFrame, leaving a frame window where <i data-lucide>
   placeholders were in the DOM unpainted. Also fixes the lucide API: the
   old code passed { nodes: [scope] } which lucide 0.468.0 silently ignores
   (unrecognised option); the correct scoped API is { root: scope }.

2. sidebar-sessions.js — renderSessionList() now calls lucide.createIcons()
   synchronously on the stickyTop node right after building it (before
   appending to the main list). This ensures New Session / Agent Chat icons
   are resolved before any paint, matching the stability of session-item
   icons which never visibly flicker.

Session items don't exhibit the blank-icon flash because they are rebuilt
in a large batch where the rAF fires before a visible paint. The top-action
buttons are a smaller targeted swap (via refreshSessionTopActions on vendor
change) where the single-frame gap is perceptible.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@akuehner akuehner merged commit 8802d38 into main May 19, 2026
@akuehner akuehner deleted the fix/sidebar-icons-sync-resolution branch May 19, 2026 15:03
@clagentic-release-bot
Copy link
Copy Markdown

This issue has been resolved in version 1.1.1-beta.1 (beta).

To update, run:

npx @clagentic/console@1.1.1-beta.1

@clagentic-release-bot
Copy link
Copy Markdown

This issue has been resolved in version 1.2.0 (stable).

To update, run:

npx @clagentic/console@1.2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant