fix(item-catalog): prevent first-open layout flash by reserving tile min-height#425
Open
ActiveInAI wants to merge 1 commit into
Open
fix(item-catalog): prevent first-open layout flash by reserving tile min-height#425ActiveInAI wants to merge 1 commit into
ActiveInAI wants to merge 1 commit into
Conversation
…ut flash On first open of the item catalog, grid tiles briefly collapse before their thumbnails load (the auto-fill columns have no resolved width yet), so labels stack into a cramped two-row text layout that reflows once images arrive. Reserving a min-height on the square thumbnail wrapper keeps each tile's footprint stable from the first paint, eliminating the flash. No visual change once images are loaded. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Reserve a
min-heighton the item-catalog tile's square thumbnail wrapper so tiles keep a stable footprint from the first paint.Why
On the first open of the item catalog, the
auto-fill, minmax(90px, 1fr)grid has no resolved column width for a frame and the<img loading="eager">thumbnails haven't decoded yet, so theaspect-squarewrappers collapse to near‑zero height. The labels then stack into a cramped two‑row text layout that visibly reflows into the normal grid once the images arrive (a brief FOUC). Subsequent opens look fine because the images are cached.Fix
Add
min-h-[90px](matching the column min) to the thumbnail wrapper initem-catalog.tsx. Each tile now reserves its footprint before images load, so the grid renders in its final shape immediately. No change to the steady state once thumbnails are loaded.Notes
Single-line change. Verified on the standalone editor (
apps/editor, dev) — the first-open flash is gone and the loaded grid is unchanged.