보스 리스트 스태거 개선: 구분선 중복 제거 + 버벅임 완화
- 내부 row의 border-t/first:border-t-0 제거, 부모 divide-y로 통일 (motion.div 래핑으로 first-child 판정이 어긋나 구분선 중복 생기던 문제) - divide color는 divide-[var(--panel-border)]로 토큰 직접 지정 - stagger 파라미터 완화: yOffset 20→10, duration 0.3→0.25, 간격 0.04→0.03 (동시 애니메이션/이미지 디코드 부담 감소) - 보스 이미지에 loading=lazy, decoding=async 추가해 초기 프레임 블로킹 방지 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
1344a2f7a9
commit
48f43ecc0b
1 changed files with 6 additions and 7 deletions
|
|
@ -69,11 +69,10 @@ export default function BossSelector({ characterName, bosses, selections, onChan
|
|||
defer
|
||||
>
|
||||
<StaggerGroup
|
||||
className="divide-y px-2"
|
||||
style={{ '--tw-divide-opacity': 1 }}
|
||||
staggerDelay={0.04}
|
||||
yOffset={20}
|
||||
duration={0.3}
|
||||
className="divide-y divide-[var(--panel-border)] px-2"
|
||||
staggerDelay={0.03}
|
||||
yOffset={10}
|
||||
duration={0.25}
|
||||
>
|
||||
{bosses.map((boss) => {
|
||||
const availableDiffs = DIFFICULTIES.filter((d) =>
|
||||
|
|
@ -95,7 +94,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
|
|||
return (
|
||||
<div
|
||||
key={boss.id}
|
||||
className={`flex items-center gap-3 px-3 py-3 border-t first:border-t-0 ${
|
||||
className={`flex items-center gap-3 px-3 py-3 ${
|
||||
disabled ? 'pointer-events-none' : ''
|
||||
}`}
|
||||
style={{
|
||||
|
|
@ -109,7 +108,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
|
|||
className="shrink-0 w-11 h-11 rounded-lg overflow-hidden"
|
||||
style={{ background: 'var(--surface-nested)' }}
|
||||
>
|
||||
<img src={boss.image_url || '/default.png'} alt={boss.name} className="w-full h-full object-cover" />
|
||||
<img src={boss.image_url || '/default.png'} alt={boss.name} loading="lazy" decoding="async" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span className="text-base font-medium leading-tight whitespace-nowrap overflow-hidden text-ellipsis">{boss.name}</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue