From c73be9d87cb109289f93a7c57396093b1de5ff3e Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Wed, 4 Dec 2024 11:34:37 +0100
Subject: [PATCH] Display an empty pinned message banner when loading

---
 .../views/rooms/PinnedMessageBanner.tsx         | 17 ++++++++++++++---
 src/hooks/usePinnedEvents.ts                    |  6 ++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/PinnedMessageBanner.tsx b/src/components/views/rooms/PinnedMessageBanner.tsx
index f44b4417c9..b988534e8f 100644
--- a/src/components/views/rooms/PinnedMessageBanner.tsx
+++ b/src/components/views/rooms/PinnedMessageBanner.tsx
@@ -46,7 +46,7 @@ interface PinnedMessageBannerProps {
 export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
     const pinnedEventIds = usePinnedEvents(room);
     const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
-    const eventCount = pinnedEvents.length;
+    const eventCount = pinnedEvents?.length || 0;
     const isSinglePinnedEvent = eventCount === 1;
 
     const [currentEventIndex, setCurrentEventIndex] = useState(eventCount - 1);
@@ -55,8 +55,19 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
         setCurrentEventIndex(() => eventCount - 1);
     }, [eventCount]);
 
-    const pinnedEvent = pinnedEvents[currentEventIndex];
-    if (!pinnedEvent) return null;
+    const pinnedEvent = pinnedEvents?.[currentEventIndex];
+
+    // We are fetching the pinned messages
+    if (!pinnedEvents)
+        return (
+            <div
+                className="mx_PinnedMessageBanner"
+                aria-label={_t("room|pinned_message_banner|description")}
+                data-testid="pinned-message-banner"
+            />
+        );
+    // No pinned messages, we don't display the banner
+    else if (!pinnedEvent) return null;
 
     const shouldUseMessageEvent = pinnedEvent.isRedacted() || pinnedEvent.isDecryptionFailure();
 
diff --git a/src/hooks/usePinnedEvents.ts b/src/hooks/usePinnedEvents.ts
index a29c65625c..785d45b88e 100644
--- a/src/hooks/usePinnedEvents.ts
+++ b/src/hooks/usePinnedEvents.ts
@@ -169,6 +169,7 @@ async function fetchPinnedEvent(room: Room, pinnedEventId: string, cli: MatrixCl
 
 /**
  * Fetch the pinned events
+ * Returns null if the pinned events are not fetched yet
  * @param room
  * @param pinnedEventIds
  */
@@ -189,13 +190,14 @@ export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Ar
 /**
  * Fetch the pinned events and sort them by from the oldest to the newest
  * The order is determined by the event timestamp
+ * Returns null if the pinned events are not fetched yet
  * @param room
  * @param pinnedEventIds
  */
-export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> {
+export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
     const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
     return useMemo(() => {
-        if (!pinnedEvents) return [];
+        if (!pinnedEvents) return null;
 
         return pinnedEvents.sort((a, b) => {
             if (!a) return -1;