App become slow with messages

1

Hey
the app is slow when i have more than 100 messages. from my understanding i need to use virtual list?
how can i do that inside the messages?

Thanks!

2

do i add the message with the addMessage()? or add item to the virtual list?
anyone know?

3

Are you evaluating the nodes on each insert of messages? Also, asi you say, use VL. But have in mind that VL needs a fixed height, so it would be kind of tricky to apply. Maybe you can paginate the messages. As whatssap app does. Just show the las 20 or so. And if the user need more just fetch them from the back.

4

messages are the full page just like the example on the docs.
i thought about your solution but don’t i have to remove the previously loaded 20 messages?
so i will have to add 20 new messages and remove 20 messages that are not on the view .
is this correct?

5

yes, i dont know why 100 messages make your app slow. I think it shouldent. But yes, just replace the 20 messages on the view with the new 20 or 30

6

im testing cordova browser because its faster to test. and it gets slow there.

so the correct component is Infinite Scroll?

still don’t know how to remove the messages that are out of the view.

7

please, make a small sample,

at the end of the post you have some base projects. core vue react svlete.

8

There is nothing that im doing that is not in the docs messages example. i am actually using the same code to init the messages and the messagebar
and my messages are a local js array. and i add them with messages.addMessages(myJSArr);

myJSArr =[ { "text": "lll", "textFooter": "<img width=\"20px\" height=\"20px\" src=\"assets/icons/chat/check.svg\" style=\"position: fixed; bottom: 3px;\"><span>٠٦:٤٤ م</span>", "request_id": "99BFB252-A592-FB9F-FF51-FB1401AD1500", "status": "Sent", "type": "sent", "attrs": { "Client_id": 1593704640574 }, "ID": "message:A37CC4A2-3667-45C7-9AEF-1908E52FCCA2", "time": 1593704641000, "obj": "5F47EB8B-B860-4A8C-83DB-3D1570EEC229" }]

9

ok, since you didnt provide a small sample. Just try to append the new 20 messages and remove the old ones.

10

im not a hardcore coder. so im sure there is a library that can do this.
how about https://clusterize.js.org/ ? do you think it will work with the messages component? do you have another library in mind?
im testing it out right now and i cant tell if it actually activating.

11

you can try, but again, it depends on the height of the messages:

Should rows be the same height?

This is not critical, but it’s highly recommended that the rows are the same height. Row height is determined during initialization, picking some of the first rows and then using those for all calculations.

12

yea but a message height is not predefined.
so i should call it after i insert all the messages into the page?

// JavaScript
var clusterize = new Clusterize({
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

i will give it a go.

1 Like
13

I use addMessage();

If you test on browser sometime it will slowdown I think it’s because of phonegap or Cordova browser memory.

Have you try to restart your computer ?
After I restart my computer it back to normal.

But , when I test on browser it’s getting slow again.

If you did add platform you should remove it when you working with Cordova browser.