refactor: separate "loading" message components

This is a preparation for adding `useRovingTabindex()` to them.
deltachat · Jan 10, 2025 · f365874 · f365874
1 parent c247d87
commit f365874
Showing 1 changed file with 44 additions and 23 deletions.
diff --git a/packages/frontend/src/components/message/MessageList.tsx b/packages/frontend/src/components/message/MessageList.tsx
@@ -829,35 +829,17 @@ export const MessageListInner = React.memo(
                 } else if (message?.kind === 'loadingError') {
                   // TODO shall we add `useRovingTabindex` here as well?
                   return (
-                    <div className='info-message' id={String(messageId.msg_id)}>
-                      <div
-                        className='bubble'
-                        style={{
-                          backgroundColor: 'rgba(55,0,0,0.5)',
-                        }}
-                      >
-                        loading message {messageId.msg_id} failed:{' '}
-                        {message.error}
-                      </div>
-                    </div>
+                    <MessageLoadingError
+                      messageId={messageId}
+                      message={message}
+                    />
                   )
                 } else {
                   // setTimeout tells it to call method in next event loop iteration, so after rendering
                   // it is debounced later so we can call it here multiple times and it's ok
                   setTimeout(loadMissingMessages)
                   // TODO shall we add `useRovingTabindex` here as well?
-                  return (
-                    <div className='info-message' id={String(messageId.msg_id)}>
-                      <div
-                        className='bubble'
-                        style={{
-                          backgroundColor: 'rgba(55,0,0,0.5)',
-                        }}
-                      >
-                        Loading Message {messageId.msg_id}
-                      </div>
-                    </div>
-                  )
+                  return <MessageLoading messageId={messageId} />
                 }
               }
             })}
@@ -877,6 +859,45 @@ export const MessageListInner = React.memo(
   }
 )
 
+function MessageLoadingError({
+  messageId,
+  message,
+}: {
+  messageId: T.MessageListItem & { kind: 'message' }
+  message: T.MessageLoadResult
+}) {
+  return (
+    <div className='info-message' id={String(messageId.msg_id)}>
+      <div
+        className='bubble'
+        style={{
+          backgroundColor: 'rgba(55,0,0,0.5)',
+        }}
+      >
+        loading message {messageId.msg_id} failed: {message.error}
+      </div>
+    </div>
+  )
+}
+function MessageLoading({
+  messageId,
+}: {
+  messageId: T.MessageListItem & { kind: 'message' }
+}) {
+  return (
+    <div className='info-message' id={String(messageId.msg_id)}>
+      <div
+        className='bubble'
+        style={{
+          backgroundColor: 'rgba(55,0,0,0.5)',
+        }}
+      >
+        Loading Message {messageId.msg_id}
+      </div>
+    </div>
+  )
+}
+
 function JumpDownButton({
   countUnreadMessages,
   jumpToMessage,