Ionic2: List freezing

Ionic Framework ionic-v3
1

Hi All,

I am using Ionic2 with Meteor/mongo to display a list of messages.

I display local messages and then server messages.

html

<ion-content padding class="messages-page-content">
	<ion-scroll scrollY="true" class="messages">

		<div *ngIf="localMessageCursor && localMessageCursor.count() > 0">
			<div *ngFor="let message of localMessageCursor" class="message-wrapper">
				<div *ngIf="message">
					<div *ngIf="message.changeDate">
						<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
					</div>
					<div [class]="'message message-' + message.ownership">
						<div class="message-content">local:{{message.content}}</div>
						<span class="time-tick">
							<span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
							<div *ngIf="message.readByReceiver === true && senderId && senderId === message.senderId">
								<span class="checkmark">
									<div class="checkmark_stem"></div>
									<div class="checkmark_kick"></div>
								</span>
							</div>
						</span>
					</div>
				</div>
			</div>
		</div>

		<template ngFor let-message [ngForOf]="messages">
			<div *ngIf="message && exists(message) === false" class="message-wrapper">
				<div *ngIf="message.changeDate">
					<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
				</div>
				<div [class]="'message message-' + message.ownership">
					<div class="message-content">server:{{message.content}}</div>
					<span class="time-tick">
        				<span *ngIf="message" class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
						<div *ngIf="message && message.readByReceiver === true && senderId && senderId === message.senderId">
							<span class="checkmark">
								<div class="checkmark_stem"></div>
								<div class="checkmark_kick"></div>
							</span>
						</div>
					</span>
				</div>
			</div>
		</template>

	</ion-scroll>
</ion-content>

ts

  public messages: Mongo.Cursor<Message>;
  public localMessageCursor: Mongo.Cursor<Message>;


Messages.insert({
  chatId: chatId,
  senderId: senderId,
  content: content,
  readByReceiver: false,
  createdAt: new Date()
});

This works fine when I initially load the page. It displays all the messages in both Cursors. If I add a message to the localMessageCursor, the list is dynamically updated as expected. However, if I add a message to themessages Cursor, then it freezes (No messages are displayed, and the page is unresponsive).

I have tried trimming down the html, to be just as follows, but I get the same result.

	<div *ngIf="localMessageCursor && localMessageCursor.count() > 0">
		<div *ngFor="let message of localMessageCursor" class="message-wrapper">
			<div *ngIf="message">
                                 {{message.content}}
			</div>
		</div>
	</div>

	<template ngFor let-message [ngForOf]="messages">
                   {{message.content}}
	</template>

If anyone can give me any ideas, I would appropriate it.