loadingMessages fails to update even after setting messageLoaded (BUG)

[Minato-TW]

Describe the bug

After switching to a new room to fetch messages, the loadingMessages variable fails to update resulting in infinite spinner.

Steps to reproduce

The following snippet from my code filters messages based on the selected room and sets the messagesLoaded prop.

Expected behavior

A clear and concise description of what you expected to happen when you encounter the bug.

    fetchMessages: function({ room, options }) {
      this.messagesLoaded = false;
      this.messages = [];
      this.selectedRoom = room.roomId;
      this.messages = this.allMessages.filter(message => message.roomId === this.selectedRoom);
      this.messagesLoaded = true;
    }

Screenshots

As seen in the image above, messagesLoaded is set to true but the spinner continues running. Not sure if I'm missing something obvious here.

Device (please complete the following information)

• OS: Arch Linux
• Browser: Firefox 81.0.2
• Package version: 0.5.1

Thank you!

[aubrydario]

I can reproduce this issue. I researched a bit and think it's happening because the messages watcher doesn't get triggered and therefor loadingMessages doesn't get set to false.

https://github.com/antoine92190/vue-advanced-chat/blob/dc7140bea80e6da305a3f432469966a7bc2850d7/src/ChatWindow/Room.vue#L343-L371

I couldn't find a quick fix for this problem. I try again later. @antoine92190 Maybe you have an idea?

[antoine92190]

messagesLoaded is not used to show/hide the loading spinner, it is used to stop pagination when scrolling up.

Can you try

    fetchMessages: function({ room, options }) {
      this.selectedRoom = room.roomId;
      this.messages = this.allMessages.filter(message => message.roomId === this.selectedRoom);
    }

If not working, maybe try a workaround below

    fetchMessages: function({ room, options }) {
      this.selectedRoom = room.roomId;
      setTimeout(() => {
          this.messages = this.allMessages.filter(message => message.roomId === this.selectedRoom);
      }, 100)
    }

@aubrydario @Minato-TW In any case, could you share a full working component with dummy data so I can reproduce the issue and find a clean solution?

[antoine92190]

Please also make sure you are using the latest version of the vue-advanced-chat package.

[Minato-TW]

I still have the same issue after trying your code above. Yes, I'm using the latest version from npm. Here's a minimum reproducible component.

<template>
  <chat-window
    :currentUserId="currentUserId"
    :rooms="rooms"
    :messages="messages"
    height="calc(100vh - 64px)"
    class="mt-16 pa-5"
    :loadingRooms="loadingRooms"
    :messagesLoaded="messagesLoaded"
    @fetchMessages="fetchMessages"
    :showNewMessagesDivider="false"
    :theme="theme"
  />
</template>
 
<script>
import ChatWindow from "vue-advanced-chat";
import "vue-advanced-chat/dist/vue-advanced-chat.css";

export default {
  components: {
    ChatWindow,
  },
  data() {
    return {
      rooms: [
        {
          roomId: "global",
          roomName: "Global Chat",
          users: [
            {
              _id: 1234,
              username: "John Doe",
              status: {
                state: "online",
                last_changed: "today, 14:30",
              },
            },
            {
              _id: 4321,
              username: "John Snow",
              status: {
                state: "online",
                last_changed: "14 July, 20:00",
              },
            },
          ],
        },
        {
          roomId: "private",
          roomName: "Private Chat",
          users: [
            {
              _id: 1234,
              username: "John Doe",
              status: {
                state: "online",
                last_changed: "today, 14:30",
              },
            },
            {
              _id: 4321,
              username: "John Snow",
              status: {
                state: "online",
                last_changed: "14 July, 20:00",
              },
            },
          ],
        },
      ],
      allMessages: [
        {
          _id: 7890,
          content: "message 1",
          roomId: "global",
          sender_id: 1234,
          username: "John Doe",
          date: "13 November",
          timestamp: "10:10",
          seen: true,
        },
        {
          _id: 3333,
          content: "message 2",
          roomId: "private",
          sender_id: 1234,
          username: "John Doe",
          date: "13 November",
          timestamp: "10:20",
          seen: true,
        },
        {
          _id: 5555,
          content: "message 2",
          roomId: "global",
          sender_id: 4321,
          username: "John Snow",
          date: "14 November",
          timestamp: "10:22",
          seen: true,
        },
      ],
      currentUserId: 1234,
      loadingRooms: false,
      messagesLoaded: true,
      messages: [],
      selectedRoom: null,
      theme: "dark",
    };
  },
  methods: {
    fetchMessages: function ({ room, options }) {
      this.selectedRoom = room.roomId;
      this.messages = this.allMessages.filter(
        (message) => message.roomId === this.selectedRoom
      );
      console.log(this.messages);
    },
  },
};
</script>
<style>
.chat-container {
  box-shadow: 0 0 4px rgb(88, 84, 84);
  border-radius: 0px !important;
}
</style>

As soon as I click on the private room and go back to Global, the infinite spinner starts.

Thank you.

[antoine92190]

Thanks, I can reproduce the issue. I will fix this very soon

[antoine92190]

Fixed in 9d0a7ef

[Minato-TW]

Thanks for fixing this so quickly!

[Minato-TW]

Hello,

I still seem to have the issue when one or both of the rooms have 0 messages. You can use the same code from above just with the "private" room message removed.

      allMessages: [
        {
          _id: 7890,
          content: "message 1",
          roomId: "global",
          sender_id: 1234,
          username: "John Doe",
          date: "13 November",
          timestamp: "10:10",
          seen: true,
        },
        {
          _id: 5555,
          content: "message 2",
          roomId: "global",
          sender_id: 4321,
          username: "John Snow",
          date: "14 November",
          timestamp: "10:22",
          seen: true,
        },
      ]

Clicking on the private chat runs an infinite spinner instead of showing "No messages".

Thank you.

[antoine92190]

This happens because you are playing with hardcoded data.
For the plugin to work properly, you need to follow loading pattern correctly, meaning that you need to update messagesLoaded prop every time you fetch a new room.
Hence fetchMessages should look like this:

fetchMessages({ room, options }) {
    this.messagesLoaded = false
    this.messages = []

    // use timeout to mimic server fetched data
    setTimeout(() => {
        this.messagesLoaded = true
    }, 0)
}

[Minato-TW]

Thanks, that was it.