Meteor UX Issue: After adding item to a sorted list, the item is added to the top and then sorted

Question

I am creating a basic chat with Meteor.

On the client I do:

div.chat-discussion
  each messages
    +chatMessage

The helper is

Messages.find
   conversationId: t.data.conversation._id
,   
   sort:
      createdAt: 1

So I am sorting the chat message in order from oldest first to newest last.

The chat looks like this

But whenever I send a message, it isn't added directly to the bottom.

It is added to the top for a few milliseconds and then shifted to the bottom.

It makes the UX feel glitchy. Why is this happening, and how can I fix this?

UPDATE

I seemed to have fixed the issue by removing the sort and just returning the messages in the helpers like

Messages.find
   conversationId: t.data.conversation._id

So if I don't sort client side, the message is added to the bottom of the message list automatically without flashing. I am not sure how or why. I guess by default it is sorted in order of oldest first.

Answer 1

FIFO之外的集合没有默认排序，这意味着只要您不排序，记录就会在写入时发送。

如果您只是持续留言，这可能符合您的需求，但有时您处于同步/离线状态时，您可能会在时间排序时获得列表。

我猜你在服务器上使用autopublish？

您应该编写自己的服务器publish方法并从服务器返回已排序的列表。

因此，在客户端，您可以仅通过find()订阅，或者也可以在mini-mongo（首选）上进行排序

这可以防止出现小问题

干杯

Answer 2

我弄清楚发生了什么。

最终的问题是与我正在使用的排序冲突以及timestampable（https://atmospherejs.com/zimme/collection-timestampable）包如何添加createdAt字段。

我正在通过字段createdAt对客户端进行排序，该字段由timestampable包添加。问题是当第一次插入文档时该字段不存在，这就是为什么我看到该消息附加到列表顶部并且当createdAt字段刚刚添加后，然后它跳到了排序位置。

为了解决这个问题，我在插入时添加了一个名为sentAt的字段，现在也按该字段进行排序。

这解决了这个问题。我试图按照插入时不存在的字段进行排序。即使在插入后立即添加字段，这也会在UI中显示。