Start making the chat faster, but it flickers

app/soapbox/actions/chats.js

@@ -1,5 +1,6 @@
 import api from '../api';
 import { getSettings, changeSetting } from 'soapbox/actions/settings';
+import { v4 as uuidv4 } from 'uuid';
 import { Map as ImmutableMap } from 'immutable';
 
 export const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
@@ -42,11 +43,13 @@ export function fetchChatMessages(chatId) {
 
 export function sendChatMessage(chatId, params) {
   return (dispatch, getState) => {
-    dispatch({ type: CHAT_MESSAGE_SEND_REQUEST, chatId, params });
+    const uuid = uuidv4();
+    const me = getState().get('me');
+    dispatch({ type: CHAT_MESSAGE_SEND_REQUEST, chatId, params, uuid, me });
     return api(getState).post(`/api/v1/pleroma/chats/${chatId}/messages`, params).then(({ data }) => {
-      dispatch({ type: CHAT_MESSAGE_SEND_SUCCESS, chatId, chatMessage: data });
+      dispatch({ type: CHAT_MESSAGE_SEND_SUCCESS, chatId, chatMessage: data, uuid });
     }).catch(error => {
-      dispatch({ type: CHAT_MESSAGE_SEND_FAIL, chatId, error });
+      dispatch({ type: CHAT_MESSAGE_SEND_FAIL, chatId, error, uuid });
     });
   };
 }

app/soapbox/reducers/chat_message_lists.js

@@ -1,6 +1,7 @@
 import {
   CHATS_FETCH_SUCCESS,
   CHAT_MESSAGES_FETCH_SUCCESS,
+  CHAT_MESSAGE_SEND_REQUEST,
   CHAT_MESSAGE_SEND_SUCCESS,
 } from 'soapbox/actions/chats';
 import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
@@ -32,18 +33,20 @@ const importLastMessages = (state, chats) =>
 
 export default function chatMessageLists(state = initialState, action) {
   switch(action.type) {
+  case CHAT_MESSAGE_SEND_REQUEST:
+    return updateList(state, action.chatId, [action.uuid]).sort();
   case CHATS_FETCH_SUCCESS:
-    return importLastMessages(state, action.chats);
+    return importLastMessages(state, action.chats).sort();
   case STREAMING_CHAT_UPDATE:
     if (action.chat.last_message)
-      return importMessages(state, [action.chat.last_message]);
+      return importMessages(state, [action.chat.last_message]).sort();
     else
-      return state;
+      return state.sort();
   case CHAT_MESSAGES_FETCH_SUCCESS:
-    return updateList(state, action.chatId, action.chatMessages.map(chat => chat.id).reverse());
+    return updateList(state, action.chatId, action.chatMessages.map(chat => chat.id).reverse()).sort();
   case CHAT_MESSAGE_SEND_SUCCESS:
-    return updateList(state, action.chatId, [action.chatMessage.id]);
+    return updateList(state, action.chatId, [action.chatMessage.id]).sort();
   default:
-    return state;
+    return state.sort();
   }
 };

app/soapbox/reducers/chat_messages.js

@@ -1,6 +1,7 @@
 import {
   CHATS_FETCH_SUCCESS,
   CHAT_MESSAGES_FETCH_SUCCESS,
+  CHAT_MESSAGE_SEND_REQUEST,
   CHAT_MESSAGE_SEND_SUCCESS,
 } from 'soapbox/actions/chats';
 import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
@@ -25,12 +26,20 @@ const importLastMessages = (state, chats) =>
 
 export default function chatMessages(state = initialState, action) {
   switch(action.type) {
+  case CHAT_MESSAGE_SEND_REQUEST:
+    return importMessage(state, fromJS({
+      id: action.uuid, // Make fake message to get overriden later
+      chat_id: action.chatId,
+      account_id: action.me,
+      content: action.params.content,
+      pending: true,
+    }));
   case CHATS_FETCH_SUCCESS:
     return importLastMessages(state, fromJS(action.chats));
   case CHAT_MESSAGES_FETCH_SUCCESS:
     return importMessages(state, fromJS(action.chatMessages));
   case CHAT_MESSAGE_SEND_SUCCESS:
-    return importMessage(state, fromJS(action.chatMessage));
+    return importMessage(state, fromJS(action.chatMessage)).delete(action.uuid);
   case STREAMING_CHAT_UPDATE:
     return importLastMessages(state, fromJS([action.chat]));
   default: