injectlib/WebChat
1
0
Fork 0
mirror of https://github.com/molvqingtai/WebChat.git synced 2025-11-25 19:27:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent setup component render before userInfo loads

Browse Source 
Add conditional rendering to avoid accessing undefined userInfo:
- Wrap content in {userInfo && ...} to wait for initial data
- Remove optional chaining and string padding fallbacks
- Simplify WordRotate props by passing userInfo.name directly

This eliminates unnecessary renders and ensures clean UI presentation
from the start of the animation sequence.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
molvqingtai
2025-10-01 21:16:00 +08:00
parent 405ab16452
commit cae3a08811
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/content/views/setup/index.tsx
View File

@@ -97,28 +97,30 @@ const Setup: FC = () => {
return (
<div className="absolute inset-0 z-50 flex rounded-xl bg-black/10 shadow-2xl backdrop-blur-sm">
<div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
<BlurFade key={userInfo?.avatar} inView>
<Avatar className="size-24 cursor-pointer border-4 border-white ">
<AvatarImage src={userInfo?.avatar} className="size-full" alt="avatar" />
<AvatarFallback>
<UserIcon size={30} className="text-slate-400" />
</AvatarFallback>
</Avatar>
</BlurFade>
<div className="flex items-center" key={userInfo?.name}>
<motion.div
className="text-2xl font-bold text-primary"
initial={{ x: -10, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
>
@
</motion.div>
<WordRotate className="text-2xl font-bold text-primary" words={[`${userInfo?.name || ''.padEnd(10, ' ')}`]} />
{userInfo && (
<div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
<BlurFade key={userInfo.avatar} inView>
<Avatar className="size-24 cursor-pointer border-4 border-white ">
<AvatarImage src={userInfo.avatar} className="size-full" alt="avatar" />
<AvatarFallback>
<UserIcon size={30} className="text-slate-400" />
</AvatarFallback>
</Avatar>
</BlurFade>
<div className="flex items-center" key={userInfo.name}>
<motion.div
className="text-2xl font-bold text-primary"
initial={{ x: -10, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
>
@
</motion.div>
<WordRotate className="text-2xl font-bold text-primary" words={[userInfo.name]} />
</div>
<PulsatingButton onClick={handleSetup}>Start chatting</PulsatingButton>
</div>
<PulsatingButton onClick={handleSetup}>Start chatting</PulsatingButton>
</div>
)}
</div>
)
}