oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feat(ui): Add a skeleton screen placeholder for the Logo and systemName in the HeaderBar during loading

Browse Source
This commit is contained in:
Apple\Apple
2025-05-18 22:01:50 +08:00
parent 9247661849
commit 1242f35177
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/components/HeaderBar.js
View File

@@ -353,15 +353,23 @@ const HeaderBar = () => {
/> />
</div> </div>
<Link to="/" onClick={() => handleNavLinkClick('home')} className="flex items-center gap-2 group ml-2"> <Link to="/" onClick={() => handleNavLinkClick('home')} className="flex items-center gap-2 group ml-2">
<img src={logo} alt="logo" className="h-7 md:h-8 transition-transform duration-300 ease-in-out group-hover:scale-105" /> {isLoading ? (
<Skeleton.Image className="h-7 md:h-8 !rounded-full" style={{ width: 32, height: 32 }} />
) : (
<img src={logo} alt="logo" className="h-7 md:h-8 transition-transform duration-300 ease-in-out group-hover:scale-105" />
)}
<div className="hidden md:flex items-center gap-2"> <div className="hidden md:flex items-center gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Typography.Title heading={4} className="!text-lg !font-semibold !mb-0 {isLoading ? (
<Skeleton.Title style={{ width: 120, height: 24 }} />
) : (
<Typography.Title heading={4} className="!text-lg !font-semibold !mb-0
bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-400 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-400
bg-clip-text text-transparent"> bg-clip-text text-transparent">
{systemName} {systemName}
</Typography.Title> </Typography.Title>
{(isSelfUseMode || isDemoSiteMode) && ( )}
{(isSelfUseMode || isDemoSiteMode) && !isLoading && (
<Tag <Tag
color={isSelfUseMode ? 'purple' : 'blue'} color={isSelfUseMode ? 'purple' : 'blue'}
className="text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm" className="text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm"
@@ -373,7 +381,7 @@ const HeaderBar = () => {
</div> </div>
</div> </div>
</Link> </Link>
{(isSelfUseMode || isDemoSiteMode) && ( {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
<div className="md:hidden"> <div className="md:hidden">
<Tag <Tag
color={isSelfUseMode ? 'purple' : 'blue'} color={isSelfUseMode ? 'purple' : 'blue'}