Messages - Slow and tip

1

Hi, on F7 V3 latest

On the Messages module :slight_smile:

  • On very performing android devices, when we have 300 messages in chat, and that we try to open an Action Sheet, the opening animation is very laggy. On average iPhone, it’s very fast. I don’t know if you have any idea of what impact Android ? (those are Android 7 & 9 devices. Motorola and Samsung. The same lag).

  • How to detect that user scroll from bottom to top and reach top of the messages ?

2

  • I dont know

  • You can use something like:

SCRIPT

$$('.page-content').on('scroll', function () {
    var winScroll = this.scrollTop; //scroll top
    console.log(winScroll);
    var height = $$('.book-text').prop("scrollHeight") - $$(window).height(); 
    var scrolled = (winScroll / height) * 100;
	console.log(scrolled);
    $$(".book-progress-bar").css("width", scrolled + "%");  // Percentage calculation of the scrolled
});

HTML

<div class="page" data-name="book">
	<div class="page-content">
		<div class="book-title">Book Title</div>
		<div class="book book-text">book text here</div>
		...
		<div class="book-progress-bar"></div>
    </div>
</div>

CSS

.book-progress-bar {
	height: 12px;
	width: 0%;
	opacity: 0.6;
  	filter: alpha(opacity=60);
}

RESULT
when you scroll through the “.book-text” the book-progress-bar is filled

scroll

1 Like
3

That is because, unfortunately, some of Androids webviews are slow. But 300 messages at a time sounds like overload. It is better to try use Virtual List of Infinite Scroll and to load more messages on scroll.

With usual scroll handler on messages content

$('.messages-content').on('scroll', function(e) {
  var scrollTop = $('.messages-content').scrollTop();
  if (scrollTop <= 0) {
    // we are on top
  }
});
1 Like
4

Hi, can you give me an idea, how to combine components ‘messages’ and ‘virtual list’?
Should ‘virtual list’ inside or outside of component ‘messages’.