devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

feat: apply delayed loading to message list skeletons

Browse Source
This commit is contained in:
Jannis Braun
2026-03-22 03:16:40 +01:00
parent a152ee9a4c
commit fce2d7c3f0
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/MessageList.tsx
+5 -2
View File
@@ -7,6 +7,7 @@ import { useSocialStore } from '../../stores/socialStore';
import { Avatar } from '../ui/Avatar'; import { Avatar } from '../ui/Avatar';
import { hasPermissionBit, PermissionBits } from '../../utils/permissions'; import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
import { isSelf } from '../../utils/identity'; import { isSelf } from '../../utils/identity';
import { useDelayedLoading } from '../../hooks/useDelayedLoading';
import type { MessageWithUser } from '@backspace/shared'; import type { MessageWithUser } from '@backspace/shared';
const EMPTY_MESSAGES: MessageWithUser[] = []; const EMPTY_MESSAGES: MessageWithUser[] = [];
@@ -55,6 +56,8 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
const [isNearBottom, setIsNearBottom] = useState(true); const [isNearBottom, setIsNearBottom] = useState(true);
const isNearBottomRef = useRef(true); const isNearBottomRef = useRef(true);
const [isLoadingMore, setIsLoadingMore] = useState(false); const [isLoadingMore, setIsLoadingMore] = useState(false);
const showInitialSkeleton = useDelayedLoading(isLoading && messages.length === 0);
const showPaginationSkeleton = useDelayedLoading(isLoadingMore);
const prevMessagesLength = useRef(0); const prevMessagesLength = useRef(0);
const prevChannelIdRef = useRef<string>(channelId); const prevChannelIdRef = useRef<string>(channelId);
const visibleMsgIdRef = useRef<string | null>(null); const visibleMsgIdRef = useRef<string | null>(null);
@@ -258,7 +261,7 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
); );
} }
if (isLoading && messages.length === 0) { if (showInitialSkeleton) {
return ( return (
<div className="flex-1 flex flex-col justify-end px-4 pb-6" role="status" aria-label="Loading messages"> <div className="flex-1 flex flex-col justify-end px-4 pb-6" role="status" aria-label="Loading messages">
{Array.from({ length: 7 }, (_, i) => ( {Array.from({ length: 7 }, (_, i) => (
@@ -284,7 +287,7 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
className="h-full overflow-y-auto overflow-x-hidden no-scrollbar" className="h-full overflow-y-auto overflow-x-hidden no-scrollbar"
onScroll={handleScroll} onScroll={handleScroll}
> >
{isLoadingMore && ( {showPaginationSkeleton && (
<div className="px-4 pt-4" role="status" aria-label="Loading older messages"> <div className="px-4 pt-4" role="status" aria-label="Loading older messages">
{Array.from({ length: 3 }, (_, i) => ( {Array.from({ length: 3 }, (_, i) => (
<div key={i} className="flex gap-3 mb-5" style={{ animationDelay: `${i * 0.15}s` }}> <div key={i} className="flex gap-3 mb-5" style={{ animationDelay: `${i * 0.15}s` }}>