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

feat: apply delayed loading to channel sidebar skeleton

Browse Source
This commit is contained in:
Jannis Braun
2026-03-22 03:16:47 +01:00
parent fce2d7c3f0
commit b6f4659849
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/layout/ChannelSidebar.tsx
+3 -1
View File
@@ -20,6 +20,7 @@ import { useContextMenuStore, type ContextMenuItem } from '../../stores/contextM
import { ConfirmDialog } from '../ui/ConfirmDialog'; import { ConfirmDialog } from '../ui/ConfirmDialog';
import { DmSearchBar } from './DmSearchBar'; import { DmSearchBar } from './DmSearchBar';
import { useDragManager, type DropTarget, type LayoutItem } from '../../hooks/useDragManager'; import { useDragManager, type DropTarget, type LayoutItem } from '../../hooks/useDragManager';
import { useDelayedLoading } from '../../hooks/useDelayedLoading';
export function ChannelSidebar() { export function ChannelSidebar() {
const spaces = useSpaceStore((s) => s.spaces); const spaces = useSpaceStore((s) => s.spaces);
@@ -88,6 +89,7 @@ export function ChannelSidebar() {
const space = spaces.find(s => s.id === currentSpaceId); const space = spaces.find(s => s.id === currentSpaceId);
const mySpacePerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined; const mySpacePerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined;
const isLoadingSpace = !!loadingSpaceId && loadingSpaceId === currentSpaceId; const isLoadingSpace = !!loadingSpaceId && loadingSpaceId === currentSpaceId;
const showChannelSkeleton = useDelayedLoading(isLoadingSpace);
const federationInstances = useInstanceStore((s) => s.instances); const federationInstances = useInstanceStore((s) => s.instances);
const instanceLabel = useMemo(() => { const instanceLabel = useMemo(() => {
@@ -626,7 +628,7 @@ export function ChannelSidebar() {
{/* Channels — dynamic category layout */} {/* Channels — dynamic category layout */}
<div ref={scrollContainerRef} className="flex-1 overflow-y-auto pt-3 px-2 space-y-[2px] no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }} onDrop={containerHandlers.onDrop} onDragOver={containerHandlers.onDragOver} onContextMenu={handleSidebarContextMenu}> <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pt-3 px-2 space-y-[2px] no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }} onDrop={containerHandlers.onDrop} onDragOver={containerHandlers.onDragOver} onContextMenu={handleSidebarContextMenu}>
{isLoadingSpace ? ( {showChannelSkeleton ? (
<div className="px-2 pt-3" role="status" aria-label="Loading channels"> <div className="px-2 pt-3" role="status" aria-label="Loading channels">
{/* Category group 1 */} {/* Category group 1 */}
<div className="skeleton skeleton-bar h-2 w-[45%] ml-2 mb-3" /> <div className="skeleton skeleton-bar h-2 w-[45%] ml-2 mb-3" />