Lotus Bot
5db4db1d95
- RoomTimeline.tsx: add eslint-disable comment for intentional eventsLength dep on timelineSegments useMemo (needed to detect in-place timeline mutations) - Remove ~47 stale eslint-disable-next-line comments across 28 files for rules that are now off in the flat config (no-param-reassign, jsx-a11y/media-has-caption, react/no-array-index-key, etc); run prettier to reformat - vite.config.js: move manualChunks from rollupOptions.output to rolldownOptions.output so Rolldown (Vite 8) actually applies it; main bundle drops from 3.5 MB to 814 kB gzip-248 kB, matrix-sdk gets its own 1.16 MB cacheable chunk Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import React, { useId } from 'react';
|
|
|
|
const ROOM_ROWS = [
|
|
{ w: '160px', indent: false },
|
|
{ w: '120px', indent: true },
|
|
{ w: '140px', indent: true },
|
|
{ w: '130px', indent: true },
|
|
{ w: '150px', indent: false },
|
|
{ w: '110px', indent: true },
|
|
];
|
|
|
|
export function LobbySkeleton() {
|
|
const id = useId().replace(/:/g, '');
|
|
const shimmerKeyframes = `
|
|
@keyframes shimmer-${id} {
|
|
0% { background-position: -400px 0; }
|
|
100% { background-position: 400px 0; }
|
|
}
|
|
`;
|
|
|
|
const shimmer = {
|
|
background:
|
|
'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
|
|
backgroundSize: '800px 100%',
|
|
animation: `shimmer-${id} 1.6s ease-in-out infinite`,
|
|
borderRadius: '4px',
|
|
} as React.CSSProperties;
|
|
|
|
return (
|
|
<>
|
|
<style>{shimmerKeyframes}</style>
|
|
<div
|
|
style={
|
|
{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexGrow: 1,
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
'--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
|
|
'--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
{/* Header — matches LobbyHeader (56px) */}
|
|
<div
|
|
style={{
|
|
height: '56px',
|
|
borderBottom: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '12px',
|
|
padding: '0 16px',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
...shimmer,
|
|
width: '32px',
|
|
height: '32px',
|
|
borderRadius: '50%',
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
<div style={{ ...shimmer, width: '130px', height: '16px' }} />
|
|
<div style={{ flex: 1 }} />
|
|
<div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
|
|
<div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
|
|
</div>
|
|
|
|
<div style={{ flex: 1, overflowY: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
|
{/* Hero — matches PageHero with large avatar + title + subtitle */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: '32px 16px 24px',
|
|
gap: '12px',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<div style={{ ...shimmer, width: '72px', height: '72px', borderRadius: '50%' }} />
|
|
<div style={{ ...shimmer, width: '180px', height: '20px' }} />
|
|
<div style={{ ...shimmer, width: '240px', height: '13px' }} />
|
|
</div>
|
|
|
|
{/* Room list rows */}
|
|
<div style={{ flex: 1, padding: '8px 0' }}>
|
|
{ROOM_ROWS.map((row, i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
padding: `6px 16px 6px ${row.indent ? '36px' : '16px'}`,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
...shimmer,
|
|
width: '18px',
|
|
height: '18px',
|
|
borderRadius: '4px',
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
<div style={{ ...shimmer, width: row.w, height: '14px' }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|