Render link previews in browser idle event

Fixes #1504
This commit is contained in:
Pavel Djundik 2017-09-06 22:03:56 +03:00
parent 9a981a526e
commit c81a74a20c
3 changed files with 18 additions and 12 deletions

View File

@ -3,17 +3,12 @@
const $ = require("jquery"); const $ = require("jquery");
const socket = require("../socket"); const socket = require("../socket");
const render = require("../render"); const render = require("../render");
const utils = require("../utils");
const chat = $("#chat"); const chat = $("#chat");
socket.on("msg", function(data) { socket.on("msg", function(data) {
if (window.requestIdleCallback) { // We set a maximum timeout of 2 seconds so that messages don't take too long to appear.
// During an idle period the user agent will run idle callbacks in FIFO order utils.requestIdleCallback(() => processReceivedMessage(data), 2000);
// until either the idle period ends or there are no more idle callbacks eligible to be run.
// We set a maximum timeout of 2 seconds so that messages don't take too long to appear.
window.requestIdleCallback(() => processReceivedMessage(data), {timeout: 2000});
} else {
processReceivedMessage(data);
}
}); });
function processReceivedMessage(data) { function processReceivedMessage(data) {

View File

@ -3,9 +3,9 @@
const $ = require("jquery"); const $ = require("jquery");
const renderPreview = require("../renderPreview"); const renderPreview = require("../renderPreview");
const socket = require("../socket"); const socket = require("../socket");
const utils = require("../utils");
socket.on("msg:preview", function(data) { socket.on("msg:preview", function(data) {
const msg = $("#msg-" + data.id); // Previews are not as important, we can wait longer for them to appear
utils.requestIdleCallback(() => renderPreview(data.preview, $("#msg-" + data.id)), 6000);
renderPreview(data.preview, msg);
}); });

View File

@ -12,7 +12,8 @@ module.exports = {
resetHeight, resetHeight,
setNick, setNick,
toggleNickEditor, toggleNickEditor,
toggleNotificationMarkers toggleNotificationMarkers,
requestIdleCallback,
}; };
function resetHeight(element) { function resetHeight(element) {
@ -77,3 +78,13 @@ function move(array, old_index, new_index) {
array.splice(new_index, 0, array.splice(old_index, 1)[0]); array.splice(new_index, 0, array.splice(old_index, 1)[0]);
return array; return array;
} }
function requestIdleCallback(callback, timeout) {
if (window.requestIdleCallback) {
// During an idle period the user agent will run idle callbacks in FIFO order
// until either the idle period ends or there are no more idle callbacks eligible to be run.
window.requestIdleCallback(callback, {timeout: timeout});
} else {
callback();
}
}