style: ChatHistory loading

src/views/ChatHistory.jsx

@@ -72,14 +72,15 @@ function ChatHistory() {
     setFormValues({ ...values });
   }, []);
 
-  const [loading, setLoading] = useState(false);
+  const [conversationsListLoading, setConversationsListLoading] = useState(false);
+  const [messageListLoading, setMessageListLoading] = useState(false);
   const [conversationsList, setConversationsList] = useState([]);
   const [chatItemMessages, setChatItemMessages] = useState([]);
   const getConversationsList = async () => {
-    setLoading(true);
+    setConversationsListLoading(true);
     setChatItemMessages([]);
     const data = await fetchConversationsList({ opisn: formValues.opisn, customer_name: formValues.customer_name, });
-    setLoading(false);
+    setConversationsListLoading(false);
     setConversationsList(data);
     if (data.length === 1) {
       setSelectedConversation(data[0]);
@@ -87,18 +88,18 @@ function ChatHistory() {
     }
   };
   const getMessagesPre = async (chatItem) => {
-    setLoading(true);
+    setMessageListLoading(true);
     const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '' });
-    setLoading(false);
+    setMessageListLoading(false);
     setChatItemMessages(prevValue => data.concat(prevValue));
     const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
     const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
     setSelectedConversation({ ...chatItem, pretime: thisPreTime, loadPrePage });
   };
   const getMessages = async (chatItem) => {
-    setLoading(true);
+    setMessageListLoading(true);
     const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '' });
-    setLoading(false);
+    setMessageListLoading(false);
     setChatItemMessages(prevValue => prevValue.concat(data));
     const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
     const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
@@ -172,7 +173,7 @@ function ChatHistory() {
     getMessages(selectedConversation);
     // window.dispatchEvent(new Event('resize'));
   };
-  const loadMore = !loading && selectedConversation.loadNextPage ? (
+  const loadMore = !messageListLoading && selectedConversation.loadNextPage ? (
       <div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'>
         <Button onClick={onLoadMore}>loading more</Button>
       </div>
@@ -181,7 +182,7 @@ function ChatHistory() {
     getMessagesPre(selectedConversation);
     // window.dispatchEvent(new Event('resize'));
   };
-  const loadMorePre = !loading && selectedConversation.loadPrePage ? (
+  const loadMorePre = !messageListLoading && selectedConversation.loadPrePage ? (
       <div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'>
         <Button onClick={onLoadMorePre}>loading more</Button>
       </div>
@@ -207,7 +208,7 @@ function ChatHistory() {
       <Divider plain orientation='left' className='mb-0'></Divider>
       <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
         <Sider width={240} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>
-          <Spin spinning={loading}>
+          <Spin spinning={conversationsListLoading}>
             {conversationsList.map((item) => (
               <ChatItem
                 {...item}
@@ -227,7 +228,7 @@ function ChatHistory() {
         <Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
           <div className='h-full relative' ref={messagesEndRef}>
             <List
-              loading={loading}
+              loading={messageListLoading}
               header={loadMorePre}
               loadMore={loadMore}
               className='h-full overflow-y-auto px-2 relative'