[FIX] eternal loading file list (#14952)

RocketChat · Jul 11, 2019 · 4efc8b0 · 4efc8b0
1 parent df6f4a4
commit 4efc8b0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/app/ui-flextab/client/tabs/uploadedFilesList.html b/app/ui-flextab/client/tabs/uploadedFilesList.html
@@ -12,7 +12,6 @@
 			</label>
 		</div>
 	</form>
-
 	<div class="flex-tab__result">
 		<ul class="attachments">
 			{{#each files}}
@@ -39,19 +38,17 @@
 					</a>
 
 					{{> icon file=. block="attachments-menu js-action" icon="menu"}}
-
 				</li>
+			{{else}}
+				{{#if Template.subscriptionsReady}}
+					<h2>{{_ "Room_uploaded_file_list_empty"}}</h2>
+				{{/if}}
 			{{/each}}
 		</ul>
-		{{#if hasMore}}
+		{{#if isLoading}}
 			<div class="load-more">
 				{{> loading}}
 			</div>
 		{{/if}}
-		{{#if Template.subscriptionsReady}}
-			{{#unless hasFiles}}
-				<h2>{{_ "Room_uploaded_file_list_empty"}}</h2>
-			{{/unless}}
-		{{/if}}
 	</div>
 </template>
diff --git a/app/ui-flextab/client/tabs/uploadedFilesList.js b/app/ui-flextab/client/tabs/uploadedFilesList.js
@@ -3,25 +3,28 @@ import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { Mongo } from 'meteor/mongo';
 import { ReactiveVar } from 'meteor/reactive-var';
+import { ReactiveDict } from 'meteor/reactive-dict';
 
 import { DateFormat } from '../../../lib/client';
 import { canDeleteMessage, getURL, handleError, t } from '../../../utils/client';
 import { popover, modal } from '../../../ui-utils/client';
 
 const roomFiles = new Mongo.Collection('room_files');
 
+const LIST_SIZE = 50;
+
 Template.uploadedFilesList.onCreated(function() {
 	const { rid } = Template.currentData();
 	this.searchText = new ReactiveVar(null);
-	this.hasMore = new ReactiveVar(true);
-	this.limit = new ReactiveVar(50);
+
+	this.state = new ReactiveDict({
+		limit: LIST_SIZE,
+		hasMore: true,
+	});
 
 	this.autorun(() => {
-		this.subscribe('roomFilesWithSearchText', rid, this.searchText.get(), this.limit.get(), () => {
-			if (roomFiles.find({ rid }).fetch().length < this.limit.get()) {
-				this.hasMore.set(false);
-			}
-		});
+		const ready = this.subscribe('roomFilesWithSearchText', rid, this.searchText.get(), this.state.get('limit'), () => this.state.set('hasMore', this.state.get('limit') <= roomFiles.find({ rid }).count())).ready();
+		this.state.set('loading', !ready);
 	});
 });
 
@@ -46,6 +49,9 @@ Template.uploadedFilesList.helpers({
 			return getURL(this.url);
 		}
 	},
+	limit() {
+		return Template.instance().state.get('limit');
+	},
 	format(timestamp) {
 		return DateFormat.formatDateAndTime(timestamp);
 	},
@@ -96,12 +102,8 @@ Template.uploadedFilesList.helpers({
 		return DateFormat.formatDateAndTime(timestamp);
 	},
 
-	hasMore() {
-		return Template.instance().hasMore.get();
-	},
-
-	hasFiles() {
-		return roomFiles.find({ rid: this.rid }).count() > 0;
+	isLoading() {
+		return Template.instance().state.get('loading');
 	},
 });
 
@@ -112,12 +114,15 @@ Template.uploadedFilesList.events({
 
 	'input .uploaded-files-list__search-input'(e, t) {
 		t.searchText.set(e.target.value.trim());
-		t.hasMore.set(true);
+		t.state.set('hasMore', true);
 	},
 
 	'scroll .flex-tab__result': _.throttle(function(e, t) {
 		if (e.target.scrollTop >= (e.target.scrollHeight - e.target.clientHeight)) {
-			return t.limit.set(t.limit.get() + 50);
+			if (!t.state.get('hasMore')) {
+				return;
+			}
+			return t.state.set('limit', t.state.get('limit') + LIST_SIZE);
 		}
 	}, 200),