Messages list loading

src/stores/ConversationStore.js

@@ -26,7 +26,6 @@ const initialConversationState = {
 
   // referenceMsg: {},
 };
-olog('initialConversationState');
 
 export const templatesSlice = (set) => ({
   templates: [],
@@ -167,8 +166,11 @@ export const conversationSlice = (set, get) => ({
 });
 
 export const messageSlice = (set, get) => ({
+  msgListLoading: false,
   activeConversations: {},
+  setMsgLoading: (msgListLoading) => set({ msgListLoading }),
   receivedMessageList: (conversationid, msgList) => set((state) => ({
+    msgListLoading: false,
     activeConversations: { ...state.activeConversations, [String(conversationid)]: msgList }
   })),
   updateMessageItem: (message) => { // msgUpdate
@@ -253,7 +255,6 @@ export const useConversationStore = create(devtools((set, get) => ({
 
   // side effects
   fetchInitialData: async (userId) => {
-    olog('fetch init');
     const { addToConversationList, setTemplates } = get();
 
     const conversationsList = await fetchConversationsList({ opisn: userId });
@@ -263,5 +264,5 @@ export const useConversationStore = create(devtools((set, get) => ({
     setTemplates(templates);
   },
 })));
-// window.store = useConversationStore; // debug:
+
 export default useConversationStore;

src/views/Conversations/Components/ConversationsList.jsx

@@ -46,7 +46,7 @@ const Conversations = () => {
   const navigate = useNavigate();
   const { loginUser } = useAuthContext();
   const { userId } = loginUser;
-  const { activeConversations, currentConversation, conversationsList, addToConversationList, setCurrentConversation, receivedMessageList,  } = useConversationStore();
+  const { activeConversations, currentConversation, conversationsList, addToConversationList, setCurrentConversation, receivedMessageList, setMsgLoading } = useConversationStore();
   const [chatlist, setChatlist] = useState([]);
   useEffect(() => {
     setChatlist(
@@ -97,11 +97,15 @@ const Conversations = () => {
       return false;
     }
   };
+  const getMessages = async (item) => {
+    setMsgLoading(true);
+    const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number });
+    receivedMessageList(item.sn, data);
+  };
   const switchConversation = async (item) => {
     const messagesList = activeConversations[`${item.sn}`] || [];
     if (messagesList.length < 20) {
-      const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number });
-      receivedMessageList(item.sn, data);
+      await getMessages(item);
     }
     if (String(item.sn) === String(currentConversation.sn)) {
       return false;

src/views/Conversations/Components/Messages.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useState, useRef, useMemo } from 'react';
-import { Image, Alert } from 'antd';
+import { Image, Spin } from 'antd';
 import { MessageBox } from 'react-chat-elements';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 
 const Messages = () => {
-  const { currentConversation, setReferenceMsg } = useConversationStore();
+  const { currentConversation, setReferenceMsg, msgListLoading,  } = useConversationStore();
   const activeMessages = useConversationStore(useShallow((state) => (currentConversation.sn ? state.activeConversations[currentConversation.sn] : [])));
 
   const messagesList = useMemo(
@@ -50,11 +50,13 @@ const Messages = () => {
 
   return (
     <div>
+    <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 ' >
       {messagesList.map((message, index) => (
         <MessageBox key={message.key} {...message} onReplyClick={() => setReferenceMsg(message)} onOpen={() => handlePreview(message)} />
       ))}
       <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
       <div ref={messagesEndRef}></div>
+    </Spin>
     </div>
   );
 };