From 02dcd2f903ad10f9c2ed5f51988424b85ce1f8de Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 02:43:32 +0100
Subject: [PATCH] feat: replace pagination spinner with skeleton rows in
 message list

---
 packages/web/src/components/chat/MessageList.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index ba548c03..b1b1d1f8 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -5,7 +5,6 @@ import { useSpaceStore, isDmChannel } from '../../stores/spaceStore';
 import { useAuthStore } from '../../stores/authStore';
 import { useSocialStore } from '../../stores/socialStore';
 import { Avatar } from '../ui/Avatar';
-import { LoadingSpinner } from '../ui/LoadingSpinner';
 import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import { isSelf } from '../../utils/identity';
 import type { MessageWithUser } from '@backspace/shared';
@@ -286,8 +285,16 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
         onScroll={handleScroll}
       >
         {isLoadingMore && (
-          <div className="py-4">
-            <LoadingSpinner size={24} />
+          <div className="px-4 pt-4">
+            {Array.from({ length: 3 }, (_, i) => (
+              <div key={i} className="flex gap-3 mb-5" style={{ animationDelay: `${i * 0.15}s` }}>
+                <div className="skeleton skeleton-circle w-10 h-10 flex-shrink-0" style={{ animationDelay: `${i * 0.15}s` }} />
+                <div className="flex-1 space-y-2 pt-1">
+                  <div className="skeleton skeleton-bar" style={{ width: `${22 + (i * 9) % 18}%`, animationDelay: `${i * 0.15}s` }} />
+                  <div className="skeleton skeleton-bar h-2.5" style={{ width: `${55 + (i * 11) % 35}%`, animationDelay: `${i * 0.15}s` }} />
+                </div>
+              </div>
+            ))}
           </div>
         )}