centersl/lobehub
1
0
Fork 0
mirror of https://github.com/lobehub/lobehub.git synced 2026-03-27 13:29:15 +07:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix: correct BrandTextLoading position after removing SSG CSS-in-JS injection (#11312)

Browse Source 
* 🐛 fix: correct BrandTextLoading position after removing SSG CSS-in-JS injection

Fixed the issue where the first-screen loading component was positioned
incorrectly at the top after removing SSG CSS-in-JS injection.

Extracted positioning styles to a separate CSS module to ensure correct
centering during initial load.

Fixes LOBE-2815

* ✨ refactor: simplify BrandTextLoading component and remove spinner styles

* Update src/components/Loading/BrandTextLoading/index.module.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Innei
2026-01-07 17:41:25 +08:00
committed by GitHub
parent 2938f197d4
commit 0de4eb803e
2 changed files with 105 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Loading/BrandTextLoading/index.module.css Normal file
View File

@@ -0,0 +1,81 @@
.container {
--brand-text-color: var(--colorText, #1f1f1f);
--brand-muted-color: var(--colorTextSecondary, #8c8c8c);
--brand-border-color: var(--colorBorder, #d9d9d9);
--brand-tag-bg: var(--colorFillTertiary, rgba(0, 0, 0, 0.04));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
height: 100dvh;
gap: 12px;
}
[data-theme='dark'] .container {
--brand-text-color: var(--colorText, #f0f0f0);
--brand-muted-color: var(--colorTextSecondary, #a6a6a6);
--brand-border-color: var(--colorBorder, #424242);
--brand-tag-bg: var(--colorFillTertiary, rgba(255, 255, 255, 0.08));
}
.brand {
display: flex;
align-items: center;
gap: 12px;
opacity: 0.6;
color: var(--brand-text-color);
}
.brand :global(.lobe-brand-loading) {
display: block;
color: inherit;
}
.debug {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 16px;
}
.debugRow {
display: flex;
gap: 8px;
align-items: center;
font-size: 12px;
color: var(--brand-muted-color);
}
.debugRow code {
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
}
.debugTag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border: 1px solid var(--brand-border-color);
border-radius: 6px;
background: var(--brand-tag-bg);
}
.debugTag code {
color: var(--brand-text-color);
}
.debugHint {
font-size: 12px;
color: var(--brand-muted-color);
}

41
src/components/Loading/BrandTextLoading/index.tsx
View File

@@ -1,34 +1,41 @@
import { Center, Tag, Text } from '@lobehub/ui';
import { BrandLoading, LobeHubText } from '@lobehub/ui/brand';
import { isCustomBranding } from '@/const/version';
import CircleLoading from '../CircleLoading';
import styles from './index.module.css';
interface BrandTextLoadingProps {
debugId: string;
}
const BrandTextLoading = ({ debugId }: BrandTextLoadingProps) => {
if (isCustomBranding) return <CircleLoading />;
if (isCustomBranding)
return (
<div className={styles.container}>
<CircleLoading />
</div>
);
const showDebug = process.env.NODE_ENV === 'development' && debugId;
return (
<Center height={'100%'} width={'100%'}>
<BrandLoading size={40} style={{ opacity: 0.6 }} text={LobeHubText} />
{process.env.NODE_ENV === 'development' && debugId && (
<Center gap={4} padding={16}>
<Text code style={{ alignItems: 'center', display: 'flex' }}>
Debug ID:{' '}
<Tag size={'large'}>
<Text code>{debugId}</Text>
</Tag>
</Text>
<Text fontSize={12} type={'secondary'}>
only visible in development
</Text>
</Center>
<div className={styles.container}>
<div aria-label="Loading" className={styles.brand} role="status">
<BrandLoading size={40} text={LobeHubText} />
</div>
{showDebug && (
<div className={styles.debug}>
<div className={styles.debugRow}>
<code>Debug ID:</code>
<span className={styles.debugTag}>
<code>{debugId}</code>
</span>
</div>
<div className={styles.debugHint}>only visible in development</div>
</div>
)}
</Center>
</div>
);
};