a

app/components/channel-feed.jsx

@@ -21,6 +21,7 @@ export default function ChannelFeed(props) {
     const channelId = channel.id;
 
     const messagesFetcher = useFetcher({ key: `messages-${channelId}` });
+    const channelFetcher = useFetcher({ key: `channel-${channelId}` });
 
     const [remainingMessages, setRemainingMessages] = useState(channel.remaining_messages);
 
@@ -184,6 +185,35 @@ export default function ChannelFeed(props) {
 
     }, [messagesFetcher, fetchingMore]);
 
+    useEffect(() => {
+        const optimisticUuid = channelFetcher.data?.optimisticUuid;
+
+        if (!optimisticUuid) {
+            return
+        }
+
+        const response = channelFetcher.data;
+
+        if (!!response?.id) {
+
+            setMessages((prev) => {
+                let i = 0;
+                const update = [...prev];
+                while(i < update.length) {
+                    const msg = update[i];
+                    if (msg.optimisticUuid == optimisticUuid) {
+                        msg.optimistic = false;
+                        msg.id = msg.id;
+                        update[i] = msg;
+                    }
+                    i++;
+                }
+                return update;
+            }, () => {});
+        }
+
+    }, [channelFetcher]);
+
     useEffect(() => {
         if (page == 0) {
             return;

app/components/channel-replybox.jsx

@@ -5,6 +5,7 @@ import { CrossCircledIcon, CameraIcon, TrashIcon, FileIcon } from '@radix-ui/rea
 import { Image } from "@unpic/react";
 import useAutosizeTextArea from './useAutosizeTextArea';
 import './styles.channel-replybox.css';
+import { v4 as uuidv4 } from 'uuid';
 
 function getVideoCover(file, seekTo = 0.0) {
     return new Promise((resolve, reject) => {
@@ -70,6 +71,10 @@ export default function ChannelReplybox(props) {
 
         form.append("__action", "create_message");
 
+        const optimisticUuid =  uuidv4().stringify();
+
+        form.append("optimisticUuid", optimisticUuid);
+
         const localFiles = files.map(f => {
             return {
                 name: f.name,
@@ -110,6 +115,7 @@ export default function ChannelReplybox(props) {
             parentId: replyingTo?.messageId,
             parentMessage: replyingTo?.message,
             files: localFiles ?? [],
+            optimisticUuid: optimisticUuid,
         })
 
         restoreDefaults();

app/routes/z.create-message.jsx

@@ -27,17 +27,18 @@ export async function action({ request }) {
         const files = body.get("files");
 
         const input = JSON.parse(body.get("input"));
+        const optimisticUuid = body.get("optimisticUuid");
 
         const { communityHandle, channelId, text, parentId } = input;
 
         const [response, errors] = await createMessage(communityHandle, channelId, text, parentId, files, jwt);
 
         if (!!errors) {
-            return json({ errors: errors });
+            return json({ optimisticUuid: optimisticUuid, errors: errors });
         }
 
         if (!!response?.id) {
-            return json({ updated: true });
+            return json({ optimisticUuid: optimisticUuid, ...response, });
         }
     } if (type == "update_profile_pic") {
         const file = body.get("file");

package.json

@@ -70,7 +70,8 @@
     "remix-electron": "^2.0.0",
     "remix-utils": "^7.3.0",
     "source-map-support": "^0.5.21",
-    "twemoji": "^14.0.2"
+    "twemoji": "^14.0.2",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.1.0",