uiux(Chat): show loading indicator when fetching more messages

src/app/chat/event_handling.nim

@@ -14,6 +14,7 @@ proc handleChatEvents(self: ChatController) =
 
   self.status.events.on("chatUpdate") do(e: Args):
     var evArgs = ChatUpdateArgs(e)
+    self.view.hideLoadingIndicator()
     self.view.updateUsernames(evArgs.contacts)
     self.view.updateChats(evArgs.chats)
     self.view.pushMessages(evArgs.messages)

src/app/chat/view.nim

@@ -38,6 +38,7 @@ QtObject:
       connected: bool
       unreadMessageCnt: int
       oldestMessageTimestamp: int64
+      loadingMessages: bool
 
   proc setup(self: ChatsView) = self.QAbstractListModel.setup
 
@@ -63,6 +64,7 @@ QtObject:
     result.recentStickers = newStickerList()
     result.unreadMessageCnt = 0
     result.pubKey = ""
+    result.loadingMessages = false
     result.setup()
 
   proc oldestMessageTimestampChanged*(self: ChatsView) {.signal.}
@@ -413,7 +415,22 @@ QtObject:
     self.setLastMessageTimestamp()
     self.messagesLoaded();
 
+  proc loadingMessagesChanged*(self: ChatsView) {.signal.}
+
+  proc hideLoadingIndicator*(self: ChatsView) {.slot.} =
+    self.loadingMessages = false
+    self.loadingMessagesChanged()
+
+  proc isLoadingMessages(self: ChatsView): QVariant {.slot.} =
+    return newQVariant(self.loadingMessages)
+
+  QtProperty[QVariant] loadingMessages:
+    read = isLoadingMessages
+    notify = loadingMessagesChanged
+
   proc requestMoreMessages*(self: ChatsView) {.slot.} =
+    self.loadingMessages = true
+    self.loadingMessagesChanged()
     let topics = self.status.mailservers.getMailserverTopicsByChatId(self.activeChannel.id).map(topic => topic.topic)
     let currentOldestMessageTimestamp = self.oldestMessageTimestamp
     self.oldestMessageTimestamp = self.oldestMessageTimestamp - 86400

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -243,6 +243,34 @@ StackLayout {
                 visible: isImage
             }
 
+            Loader {
+                active: chatsModel.loadingMessages
+                sourceComponent: loadingIndicator
+                anchors.right: parent.right
+                anchors.bottom: chatInput.top
+                anchors.rightMargin: Style.current.padding
+                anchors.bottomMargin: Style.current.padding
+            }
+
+            Component {
+                id: loadingIndicator
+                SVGImage {
+                    id: loadingImg
+                    source: "../../../app/img/loading.svg"
+                    width: 25
+                    height: 25
+                    fillMode: Image.Stretch
+                    RotationAnimator {
+                        target: loadingImg;
+                        from: 0;
+                        to: 360;
+                        duration: 1200
+                        running: true
+                        loops: Animation.Infinite
+                    }
+                }
+            }
+
             ChatInput {
                 id: chatInput
                 height: 40

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -85,6 +85,10 @@ Item {
         }
     }
 
+    Timer {
+        id: timer
+    }
+
     Component {
         id: fetchMoreMessagesButtonComponent
         Item {
@@ -110,6 +114,9 @@ Item {
                   anchors.fill: parent
                   onClicked: {
                     chatsModel.requestMoreMessages()
+                    timer.setTimeout(function(){ 
+                        chatsModel.hideLoadingIndicator()
+                    }, 3000);
                   }
                 }
             }

ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml

@@ -216,6 +216,7 @@ ScrollView {
     Connections {
         target: chatsModel
         onActiveChannelChanged: {
+            chatsModel.hideLoadingIndicator()
             chatGroupsListView.currentIndex = chatsModel.activeChannelIndex
             SelectedMessage.reset();
             chatColumn.isReply = false;