Implement infinite scroll using IntersectionObserver

client/js/render.js

@@ -12,6 +12,11 @@ const condensed = require("./condensed");
 const chat = $("#chat");
 const sidebar = $("#sidebar");
 
+const historyObserver = window.IntersectionObserver ?
+	new window.IntersectionObserver(loadMoreHistory, {
+		root: chat.get(0)
+	}) : null;
+
 module.exports = {
 	appendMessage,
 	buildChannelMessages,
@@ -145,6 +150,10 @@ function renderChannel(data) {
 	if (data.type === "channel") {
 		renderChannelUsers(data);
 	}
+
+	if (historyObserver) {
+		historyObserver.observe(chat.find("#chan-" + data.id + " .show-more").get(0));
+	}
 }
 
 function renderChannelMessages(data) {
@@ -220,3 +229,19 @@ function renderNetworks(data) {
 		utils.toggleNotificationMarkers(true);
 	}
 }
+
+function loadMoreHistory(entries) {
+	entries.forEach((entry) => {
+		if (!entry.isIntersecting) {
+			return;
+		}
+
+		var target = $(entry.target).find(".show-more-button");
+
+		if (target.attr("disabled")) {
+			return;
+		}
+
+		target.click();
+	});
+}