feat: undelivered UI

src/client/chat--message.jsx

@@ -2,7 +2,7 @@ import './chat--message.scss';
 
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import ReactMarkdown from 'react-markdown';
 import {useSelector} from 'react-redux';
 
@@ -12,12 +12,18 @@ export default function ChatMessage(props) {
   const {
     message: {
       owner,
+      pending,
       message,
       timestamp,
       rejected,
     },
     isShort,
   } = props;
+  const [undelivered, setUndelivered] = useState(false);
+  useEffect(() => {
+    const handle = setTimeout(() => pending && setUndelivered(true), 500);
+    return () => clearTimeout(handle);
+  });
   const username = useSelector((state) => usernameSelector(state, owner));
   const dtf = new Intl.DateTimeFormat(undefined, {
     hour: '2-digit',
@@ -34,7 +40,15 @@ export default function ChatMessage(props) {
   );
   return (
     <div
-      className={classnames('chat--message', {rejected, short: isShort, system: -1 === owner})}
+      className={classnames(
+        'chat--message',
+        {
+          rejected,
+          short: isShort,
+          system: -1 === owner,
+          undelivered,
+        },
+      )}
     >
       {
         !isShort && (
@@ -58,6 +72,7 @@ ChatMessage.propTypes = {
   isShort: PropTypes.bool.isRequired,
   message: PropTypes.shape({
     message: PropTypes.string,
+    pending: PropTypes.bool,
     rejected: PropTypes.bool,
     timestamp: PropTypes.number,
     owner: PropTypes.number,

src/client/chat--message.scss

@@ -3,12 +3,16 @@
 .chat--message {
   margin-top: 0.75rem;
   padding: 0.25rem 1rem;
+  transition: opacity 0.5s;
   &.rejected {
     background-color: rgba(200, 0, 0, 0.2);
   }
   &.system {
     background-color: rgba(200, 0, 0, 0.2);
   }
+  &.undelivered {
+    opacity: 0.3;
+  }
 }
 
 .chat--message, .chat--message * {

src/client/chat--submitMessage.jsx

@@ -29,6 +29,7 @@ export default function ChatSubmitMessage() {
               channel,
               message: chunk,
               owner: '/r/anonymous' === channel ? 0 : user.id,
+              pending: true,
               timestamp: Date.now(),
               uuid: uuidv4(),
             }));

src/common/state/chat.js

@@ -42,7 +42,12 @@ const slice = createSlice({
       channels[channel].messages.push(uuid);
     },
     confirmMessage: ({channels, messages}, {payload: {previous, current, timestamp}}) => {
-      messages[current] = {...messages[previous], timestamp, uuid: current};
+      const {pending, ...previousMessage} = messages[previous];
+      messages[current] = {
+        ...previousMessage,
+        timestamp,
+        uuid: current,
+      };
       delete messages[previous];
       const {[messages[current].channel]: channel} = channels;
       const index = channel.messages.findIndex((uuid) => uuid === previous);