From 537f489432824a142e47767c809de5a4fb70bd96 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 03:17:01 +0100
Subject: [PATCH] feat: apply delayed loading to member sidebar skeleton

---
 packages/web/src/components/layout/MemberSidebar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/layout/MemberSidebar.tsx b/packages/web/src/components/layout/MemberSidebar.tsx
index d58a82fc..a0b4fdd9 100644
--- a/packages/web/src/components/layout/MemberSidebar.tsx
+++ b/packages/web/src/components/layout/MemberSidebar.tsx
@@ -8,6 +8,7 @@ import { Username } from '../ui/Username';
 import { ActivityCard, hasRichActivity, getActivityAccentClass } from '../ui/ActivityCard';
 import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
 import { parseFederatedUsername } from '../../utils/identity';
+import { useDelayedLoading } from '../../hooks/useDelayedLoading';
 
 /**
  * Derives the display group for a member based on their highest-positioned role
@@ -78,9 +79,10 @@ export function MemberSidebar() {
     return { roleGroups: sorted, offlineMembers: offline };
   }, [members, ownerId]);
 
-  if (!memberListOpen) return null;
-
   const isLoadingSpace = !!loadingSpaceId && loadingSpaceId === currentSpaceId;
+  const showMemberSkeleton = useDelayedLoading(isLoadingSpace);
+
+  if (!memberListOpen) return null;
 
   const getMemberColor = (member: MemberWithUser): React.CSSProperties | undefined => {
     if (member.roles && member.roles.length > 0) {
@@ -151,7 +153,7 @@ export function MemberSidebar() {
 
   return (
     <div className="w-60 bg-surface-members flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block border-l border-border-hard">
-      {isLoadingSpace ? (
+      {showMemberSkeleton ? (
         <div className="px-3 pt-4" role="status" aria-label="Loading members">
           {/* Role group 1 */}
           <div className="skeleton skeleton-bar h-2 w-[40%] mb-3" style={{ animationDelay: '0s' }} />