fix(skin-market): stop the market dialog from resizing while loading - #2151
Merged
Conversation
Opening 浏览市场 flashed the empty state, swapped in a short "loading" line, then grew the dialog once the cards arrived — three height changes in a row, which read as a shake. The dialog now keeps one height: the modal content is a fixed-height flex column and each view (browse grid, detail, submissions) scrolls internally instead of stretching the dialog. While the first page is in flight the grid holds placeholder cards of the real card size, so the loaded state drops straight in; a refresh keeps the current cards mounted and only dims them, and 加载更多 keeps its row in place with a loading button. The loading text moves to an sr-only live region.
…tract marketBrowse, marketResults and the loading state are new data-bf hooks; the contract audit rejects any part or state a Skin cannot target.
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.
问题
打开 Skin 市场点「浏览市场」时，弹窗高度连续变了三次：
loading还是false、items为空 → 先闪一下「没有符合条件的外观包」空态；min-height: 280px）；__grid虽然写了overflow-y: auto，但父级只有min-height、没有确定高度，所以它不是内部滚动，而是把弹窗一路顶到max-height。三次高度跳变叠在一起，看上去就是抖动。
改法
弹窗定高，各视图自己滚。
.modal__content加--fill-flex并锁定min/max-height: min(720px, 78vh)，.appearance-market变成flex: 1; min-height: 0的列。浏览网格、详情页、投稿列表各自拿到flex: 1; min-height: 0; overflow-y: auto，内容再多也只在内部滚动，弹窗尺寸恒定 —— 切 tab、进详情同样不再改变大小。加载态占住位置，而不是替换位置。
prefers-reduced-motion下静止），加载完成直接换成真卡片，高度不变；opacity淡化，不清空、不重排；sr-onlylive region，读屏仍然播报。投稿页顺带补了一个
__workflow-body滚动容器 —— 定高之后，展开的手动投稿表单需要有地方滚。验证
AppearanceMarketDialog.test.tsx新增两条回归用例：首屏加载期间渲染骨架卡且不出现空态文案；空结果落定后才显示空态。npx vitest run src/infrastructure/config/components/→ 15 文件 128 用例通过。npm run build、eslint通过。