[FIX] Chrome doesn't load additional search results when botto… (#14965)

* fix scroll

* fix review

* ops

app/search/client/provider/result.js

@@ -1,4 +1,5 @@
 import { Meteor } from 'meteor/meteor';
+import { Tracker } from 'meteor/tracker';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Session } from 'meteor/session';
@@ -39,9 +40,22 @@ Meteor.startup(function() {
 	});
 });
 
-Template.DefaultSearchResultTemplate.onCreated(function() {
-	const self = this;
+Template.DefaultSearchResultTemplate.onRendered(function() {
+	const list = this.firstNode.parentNode.querySelector('.rocket-default-search-results');
+	this.autorun(() => {
+		const result = this.data.result.get();
+		if (result && this.hasMore.get()) {
+			Tracker.afterFlush(() => {
+				if (list.scrollHeight <= list.offsetHeight) {
+					this.data.payload.limit = (this.data.payload.limit || this.pageSize) + this.pageSize;
+					this.data.search();
+				}
+			});
+		}
+	});
+});
 
+Template.DefaultSearchResultTemplate.onCreated(function() {
 	// paging
 	this.pageSize = this.data.settings.PageSize;
 
@@ -53,7 +67,7 @@ Template.DefaultSearchResultTemplate.onCreated(function() {
 
 	this.autorun(() => {
 		const result = this.data.result.get();
-		self.hasMore.set(!(result && result.message.docs.length < (self.data.payload.limit || self.pageSize)));
+		this.hasMore.set(!(result && result.message.docs.length < (this.data.payload.limit || this.pageSize)));
 	});
 });
 
@@ -86,7 +100,7 @@ Template.DefaultSearchResultTemplate.helpers({
 		return Template.instance().hasMore.get();
 	},
 	message(msg) {
-		return { customClass: 'search', actionContext: 'search', ...msg };
+		return { customClass: 'search', actionContext: 'search', ...msg, groupable: false };
 	},
 	messageContext,
 });

app/search/client/style/style.css

@@ -23,6 +23,7 @@
 
 .rocket-search-result {
 	display: flex;
+	overflow: hidden;
 	flex-direction: column;
 	flex: 1;
 }

app/theme/client/imports/general/base.css

@@ -219,56 +219,3 @@ button {
 .hidden {
 	display: none;
 }
-
-.loading-animation {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-
-	display: flex;
-
-	text-align: center;
-	align-items: center;
-	justify-content: center;
-}
-
-.loading-animation > .bounce {
-	display: inline-block;
-
-	width: 10px;
-	height: 10px;
-	margin: 2px;
-
-	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
-
-	border-radius: 100%;
-	background-color: rgba(255, 255, 255, 0.6);
-}
-
-.loading-animation .bounce1 {
-	-webkit-animation-delay: -0.32s;
-	animation-delay: -0.32s;
-}
-
-.loading-animation .bounce2 {
-	-webkit-animation-delay: -0.16s;
-	animation-delay: -0.16s;
-}
-
-.file-picker-loading .loading-animation > .bounce {
-	background-color: #444444;
-}
-
-@keyframes loading-bouncedelay {
-	0%,
-	80%,
-	100% {
-		transform: scale(0);
-	}
-
-	40% {
-		transform: scale(1);
-	}
-}

app/ui-master/client/index.js

@@ -1,4 +1,4 @@
-import './loading.html';
+import './loading';
 import './error.html';
 import './logoLayout.html';
 import './main.html';

app/ui-master/client/loading/index.js

@@ -0,0 +1,2 @@
+import './loading.css';
+import './loading.html';

app/ui-master/client/loading/loading.css

@@ -0,0 +1,52 @@
+.loading-animation {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.loading-animation > .bounce {
+	display: inline-block;
+
+	width: 10px;
+	height: 10px;
+	margin: 2px;
+
+	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+
+	border-radius: 100%;
+	background-color: rgba(255, 255, 255, 0.6);
+}
+
+.loading-animation .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+
+.loading-animation .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+
+.file-picker-loading .loading-animation > .bounce {
+	background-color: #444444;
+}
+
+@keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		transform: scale(0);
+	}
+
+	40% {
+		transform: scale(1);
+	}
+}