Display an empty pinned message banner when loading

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,21 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
         setCurrentEventIndex(() => eventCount - 1);
     }, [eventCount]);
 
-    const pinnedEvent = pinnedEvents[currentEventIndex];
-    if (!pinnedEvent) return null;
+    const pinnedEvent = pinnedEvents?.[currentEventIndex];
+
+    console.log("pinnedEvents", pinnedEvents);
+
+    // 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();
 

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;