Fix no messages yet showing even when loading

web/lib/supabase/chat-messages.ts

@@ -110,16 +110,16 @@ export const usePaginatedScrollingMessages = (
 }
 
 export const useGroupedMessages = (messages: ChatMessage[] | undefined) => {
-  messages = messages ?? []
-  messages = messages.slice().reverse()
-  // Create a string key that changes when any message's content or reactions change
-  debug('messages in useGroupedMessages', messages[0]?.reactions)
-
   return useMemo(() => {
+    if (!messages) return
+
     // Group messages created within a short time of each other.
     const tempGrouped: ChatMessage[][] = []
     let systemStatusGroup: ChatMessage[] = []
 
+    messages = messages ?? []
+    messages = messages.slice().reverse()
+
     forEach(messages, (message, i) => {
       const isSystemStatus = message.visibility === 'system_status'
       const systemType = systemStatusType(message)
@@ -129,6 +129,7 @@ export const useGroupedMessages = (messages: ChatMessage[] | undefined) => {
         if (isSystemStatus) systemStatusGroup.push(message)
         else tempGrouped.push([message])
       } else {
+        if (!messages) return
         const prevMessage = messages[i - 1]
         const timeDifference = Math.abs(message.createdTime - prevMessage.createdTime)
         const creatorsMatch = message.userId === prevMessage.userId

web/pages/messages/[channelId].tsx

@@ -114,14 +114,13 @@ export const PrivateChat = (props: {
     fetchMessages,
   } = usePrivateMessages(channelId, totalMessagesToLoad, user.id)
 
-  const messages =
-    _messages?.map(
-      (m) =>
-        ({
-          ...m,
-          id: m.id,
-        }) as ChatMessage,
-    ) ?? []
+  const messages = _messages?.map(
+    (m) =>
+      ({
+        ...m,
+        id: m.id,
+      }) as ChatMessage,
+  )
 
   const loadMoreMessages = useCallback(
     (beforeId: number) => {
@@ -375,7 +374,7 @@ export const PrivateChat = (props: {
               opacity: showMessages ? 1 : 0,
             }}
           >
-            {messages === undefined ? (
+            {groupedMessages === undefined ? (
               <CompassLoadingIndicator />
             ) : (
               <>