fix(desktop): show thread replies loader (#1773)

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>

desktop/src/features/channels/ui/ChannelPane.tsx

@@ -138,6 +138,7 @@ export const ChannelPane = React.memo(function ChannelPane({
   targetMessageId,
   threadHeadMessage,
   threadMessages,
+  threadMessagesPending = false,
   threadPanelWidthPx,
   threadScrollTargetId,
   threadTypingPubkeys,
@@ -831,6 +832,7 @@ export const ChannelPane = React.memo(function ChannelPane({
               threadHeadVideoReviewContext={threadHeadVideoReviewContext}
               widthPx={threadPanelWidthPx}
               threadReplies={threadMessages}
+              threadRepliesPending={threadMessagesPending}
               threadUnreadCount={threadUnreadCounts?.get(threadHeadMessage.id)}
               threadReplyUnreadCounts={threadReplyUnreadCounts}
               threadTypingPubkeys={threadTypingPubkeys}

desktop/src/features/channels/ui/ChannelPane.types.ts

@@ -137,6 +137,7 @@ export type ChannelPaneProps = {
   profilePanelView: ProfilePanelView;
   threadHeadMessage: TimelineMessage | null;
   threadMessages: MainTimelineEntry[];
+  threadMessagesPending?: boolean;
   threadPanelWidthPx: number;
   threadTypingPubkeys: string[];
   threadReplyTargetMessage: TimelineMessage | null;

desktop/src/features/channels/ui/ChannelScreen.tsx

@@ -969,6 +969,7 @@ export function ChannelScreen({
                   targetMessageId={mainTimelineTargetMessageId}
                   threadHeadMessage={displayedThreadHeadMessage}
                   threadMessages={displayedThreadMessages}
+                  threadMessagesPending={threadRepliesQuery.isPending}
                   threadPanelWidthPx={threadPanelWidthPx}
                   threadTypingPubkeys={threadTypingPubkeys}
                   threadReplyTargetMessage={displayedThreadReplyTargetMessage}

desktop/src/features/messages/ui/MessageThreadPanel.tsx

@@ -88,6 +88,7 @@ type MessageThreadPanelProps = {
   scrollTargetId: string | null;
   threadHead: TimelineMessage | null;
   threadReplies: MainTimelineEntry[];
+  threadRepliesPending?: boolean;
   threadUnreadCount?: number;
   threadReplyUnreadCounts?: ReadonlyMap<string, number>;
   threadTypingPubkeys: string[];
@@ -332,6 +333,7 @@ export function MessageThreadPanel({
   threadHead,
   threadHeadVideoReviewContext,
   threadReplies,
+  threadRepliesPending = false,
   threadUnreadCount,
   threadReplyUnreadCounts,
   threadTypingPubkeys,
@@ -589,7 +591,7 @@ export function MessageThreadPanel({
     useAnchoredScroll({
       channelId: threadHeadId,
       contentRef: threadContentRef,
-      isLoading: repliesRenderState === "pending",
+      isLoading: threadRepliesPending || repliesRenderState === "pending",
       messages: threadMessages,
       onTargetReached: onScrollTargetResolved,
       scrollContainerRef: threadBodyRef,
@@ -664,7 +666,15 @@ export function MessageThreadPanel({
           className={cn(THREAD_PANEL_MESSAGE_GUTTER_CLASS, "pb-3 pt-0")}
           data-testid="message-thread-replies"
         >
-          {repliesRenderState === "list" ? (
+          {threadRepliesPending ? (
+            <div
+              className="space-y-2.5 pt-1"
+              data-testid="message-thread-replies-loading"
+            >
+              <ThreadMessageSkeleton />
+              <ThreadMessageSkeleton />
+            </div>
+          ) : repliesRenderState === "list" ? (
             visibleThreadHeadSummary ? (
               <div
                 className="space-y-0"