From 5f4793abe064950c1138ee08fbf6270d75072932 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 27 Apr 2018 13:55:59 -0300 Subject: [PATCH 1/3] lazy load message attachments --- .meteor/packages | 1 + .meteor/versions | 1 + package-lock.json | 32 +++++------ packages/rocketchat-lazy-load/client/index.js | 56 +++++++++++++++++++ .../client/lazyloadImage.html | 4 ++ .../client/lazyloadImage.js | 21 +++++++ packages/rocketchat-lazy-load/package.js | 16 ++++++ .../client/messageAttachment.html | 4 +- .../client/messageAttachment.js | 25 +-------- .../rocketchat-message-attachments/package.js | 3 +- .../client/imports/general/base_old.css | 2 - .../rocketchat-ui/client/views/app/room.js | 10 ++++ packages/rocketchat-ui/package.js | 3 +- 13 files changed, 133 insertions(+), 45 deletions(-) create mode 100644 packages/rocketchat-lazy-load/client/index.js create mode 100644 packages/rocketchat-lazy-load/client/lazyloadImage.html create mode 100644 packages/rocketchat-lazy-load/client/lazyloadImage.js create mode 100644 packages/rocketchat-lazy-load/package.js diff --git a/.meteor/packages b/.meteor/packages index 4e496bd5640a2..d14746ca5549a 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -189,3 +189,4 @@ rocketchat:version-check rocketchat:search chatpal:search +rocketchat:lazy-load diff --git a/.meteor/versions b/.meteor/versions index 172e46687476d..e7b0106bf2686 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -174,6 +174,7 @@ rocketchat:internal-hubot@0.0.1 rocketchat:irc@0.0.2 rocketchat:issuelinks@0.0.1 rocketchat:katex@0.0.1 +rocketchat:lazy-load@0.0.1 rocketchat:ldap@0.0.1 rocketchat:lib@0.0.1 rocketchat:livechat@0.0.1 diff --git a/package-lock.json b/package-lock.json index 0e337f3025faf..b9ff9f3b0cc9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2992,7 +2992,7 @@ "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", "dev": true, "requires": { "ms": "2.0.0" @@ -3025,7 +3025,7 @@ "mocha": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/mocha/-/mocha-4.1.0.tgz", - "integrity": "sha1-fYbPvPNcuCnidUwy4XNV7AUzh5Q=", + "integrity": "sha512-0RVnjg1HJsXY2YFDoTNzcc1NKhYuXKRrBAG2gDygmJJA136Cs2QlRliZG1mA0ap7cuaT30mw16luAeln+4RiNA==", "dev": true, "requires": { "browser-stdout": "1.3.0", @@ -3043,13 +3043,13 @@ "commander": { "version": "2.11.0", "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz", - "integrity": "sha1-FXFS/R56bI2YpbcVzzdt+SgARWM=", + "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==", "dev": true }, "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -3077,7 +3077,7 @@ "supports-color": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz", - "integrity": "sha1-iD992rwWUUKyphQn8zUt7RldGj4=", + "integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==", "dev": true, "requires": { "has-flag": "2.0.0" @@ -3357,7 +3357,7 @@ }, "compression": { "version": "1.5.2", - "resolved": "http://registry.npmjs.org/compression/-/compression-1.5.2.tgz", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.5.2.tgz", "integrity": "sha1-sDuNhub4rSloPLqN+R3cb/x3s5U=", "requires": { "accepts": "1.2.13", @@ -10419,7 +10419,7 @@ "npmlog": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", - "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=", "requires": { "are-we-there-yet": "1.1.4", "console-control-strings": "1.1.0", @@ -10813,7 +10813,7 @@ "path-type": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", - "integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=", + "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", "requires": { "pify": "3.0.0" } @@ -11186,7 +11186,7 @@ "postcss-import": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz", - "integrity": "sha1-Vck2LJGSmU7GiGXSJEGd8dspgfA=", + "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==", "dev": true, "requires": { "postcss": "6.0.17", @@ -11235,7 +11235,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true }, "supports-color": { @@ -13817,7 +13817,7 @@ "autoprefixer": { "version": "7.2.6", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz", - "integrity": "sha1-JWZy+G98c12oScTwfQCKuwVgZ9w=", + "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==", "dev": true, "requires": { "browserslist": "2.11.3", @@ -13831,7 +13831,7 @@ "browserslist": { "version": "2.11.3", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz", - "integrity": "sha1-/jYWeu0bvN5IJ+v+cTR6LMcLmbI=", + "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==", "dev": true, "requires": { "caniuse-lite": "1.0.30000808", @@ -14064,7 +14064,7 @@ "stylelint-order": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-0.8.1.tgz", - "integrity": "sha1-Nfca86FZVBVODpnlZGuj1vvjT40=", + "integrity": "sha512-8mp1P2wnI9XShYXVXDsxVigE2eXnc0C2O4ktbwUvTBwjCP4xZskIbUVxp1evSG3OK4R7hXVNl/2BnJCZkrcc/w==", "dev": true, "requires": { "lodash": "4.17.5", @@ -14101,7 +14101,7 @@ "postcss": { "version": "6.0.19", "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz", - "integrity": "sha1-dqeDhvZwudlJSmVb8jrAEu/9FVU=", + "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==", "dev": true, "requires": { "chalk": "2.3.1", @@ -14112,7 +14112,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true }, "supports-color": { @@ -15419,7 +15419,7 @@ "wide-align": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", - "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=", "requires": { "string-width": "1.0.2" } diff --git a/packages/rocketchat-lazy-load/client/index.js b/packages/rocketchat-lazy-load/client/index.js new file mode 100644 index 0000000000000..905ecb1081092 --- /dev/null +++ b/packages/rocketchat-lazy-load/client/index.js @@ -0,0 +1,56 @@ +import _ from 'underscore'; +import './lazyloadImage'; +export const fixCordova = function(url) { + if (url && url.indexOf('data:image') === 0) { + return url; + } + if (Meteor.isCordova && (url && url[0] === '/')) { + url = Meteor.absoluteUrl().replace(/\/$/, '') + url; + const query = `rc_uid=${ Meteor.userId() }&rc_token=${ Meteor._localStorage.getItem( + 'Meteor.loginToken' + ) }`; + if (url.indexOf('?') === -1) { + url = `${ url }?${ query }`; + } else { + url = `${ url }&${ query }`; + } + } + if (Meteor.settings['public'].sandstorm || url.match(/^(https?:)?\/\//i)) { + return url; + } else if (navigator.userAgent.indexOf('Electron') > -1) { + return __meteor_runtime_config__.ROOT_URL_PATH_PREFIX + url; + } else { + return Meteor.absoluteUrl().replace(/\/$/, '') + url; + } +}; + +const loadImage = el => { + const img = new Image(); + const src = el.getAttribute('data-src'); + img.onload = function() { + el.src = src; + el.removeAttribute('data-src'); + }; + img.src = fixCordova(src); +}; + +const isVisible = el => { + const rect = el.getBoundingClientRect(); + return ( + rect.top >= -100 && + rect.left >= 0 && + rect.top <= (window.innerHeight || document.documentElement.clientHeight) + ); +}; + +window.addEventListener('resize', window.lazyloadtick); + +export const lazyloadtick = _.debounce(() => { + [...document.querySelectorAll('.lazy-img[data-src]')] + .filter(isVisible) + .forEach(loadImage); +}, 500); + +window.lazyloadtick = lazyloadtick; + +export const addImage = el => isVisible(el) && loadImage(el); diff --git a/packages/rocketchat-lazy-load/client/lazyloadImage.html b/packages/rocketchat-lazy-load/client/lazyloadImage.html new file mode 100644 index 0000000000000..c88c6b9276235 --- /dev/null +++ b/packages/rocketchat-lazy-load/client/lazyloadImage.html @@ -0,0 +1,4 @@ + diff --git a/packages/rocketchat-lazy-load/client/lazyloadImage.js b/packages/rocketchat-lazy-load/client/lazyloadImage.js new file mode 100644 index 0000000000000..3186f2f53e8fb --- /dev/null +++ b/packages/rocketchat-lazy-load/client/lazyloadImage.js @@ -0,0 +1,21 @@ +import './lazyloadImage.html'; +import { addImage, fixCordova } from './'; + +Template.lazyloadImage.helpers({ + lazy() { + const { preview, src } = this; + + if (!preview) { + return fixCordova(src); + } + return `data:image/png;base64,${ preview }`; + } +}); + +Template.lazyloadImage.onCreated(function() { + const element = Template.instance().firstNode; + if (!element) { + return; + } + addImage(element); +}); diff --git a/packages/rocketchat-lazy-load/package.js b/packages/rocketchat-lazy-load/package.js new file mode 100644 index 0000000000000..d65e3f99cb54b --- /dev/null +++ b/packages/rocketchat-lazy-load/package.js @@ -0,0 +1,16 @@ +Package.describe({ + name: 'rocketchat:lazy-load', + version: '0.0.1', + summary: 'Lazy load image', + git: '' +}); + +Package.onUse(function(api) { + api.use([ + 'ecmascript', + 'templating', + 'rocketchat:lib' + ]); + + api.mainModule('client/index.js', 'client'); +}); diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.html b/packages/rocketchat-message-attachments/client/messageAttachment.html index 35b9b5ec47f0c..e8c4f1da2d0b0 100644 --- a/packages/rocketchat-message-attachments/client/messageAttachment.html +++ b/packages/rocketchat-message-attachments/client/messageAttachment.html @@ -66,9 +66,7 @@
{{#if loadImage}}
-
- -
+ {{> lazyloadImage src=image_url preview=image_preview height=(getImageHeight image_dimensions.height) class="lazy-img gallery-item" title=title description=description}} {{#if labels}}
{{#each labels}} diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.js b/packages/rocketchat-message-attachments/client/messageAttachment.js index d0df4d8f3b5f2..22064c76fc767 100644 --- a/packages/rocketchat-message-attachments/client/messageAttachment.js +++ b/packages/rocketchat-message-attachments/client/messageAttachment.js @@ -1,30 +1,11 @@ import moment from 'moment'; +import { fixCordova } from 'meteor/rocketchat:lazy-load'; const colors = { good: '#35AC19', warning: '#FCB316', danger: '#D30230' }; -const fixCordova = function(url) { - if (url && url.indexOf('data:image') === 0) { - return url; - } - if (Meteor.isCordova && (url && url[0] === '/')) { - url = Meteor.absoluteUrl().replace(/\/$/, '') + url; - const query = `rc_uid=${ Meteor.userId() }&rc_token=${ Meteor._localStorage.getItem('Meteor.loginToken') }`; - if (url.indexOf('?') === -1) { - url = `${ url }?${ query }`; - } else { - url = `${ url }&${ query }`; - } - } - if (Meteor.settings['public'].sandstorm || url.match(/^(https?:)?\/\//i)) { - return url; - } else if (navigator.userAgent.indexOf('Electron') > -1) { - return __meteor_runtime_config__.ROOT_URL_PATH_PREFIX + url; - } else { - return Meteor.absoluteUrl().replace(/\/$/, '') + url; - } -}; + /*globals renderMessageBody*/ Template.messageAttachment.helpers({ fixCordova, @@ -34,8 +15,8 @@ Template.messageAttachment.helpers({ }); }, loadImage() { - const user = Meteor.user(); if (this.downloadImages !== true) { + const user = RocketChat.models.Users.findOne({_id: Meteor.userId()}, {fields: {'settings.autoImageLoad' : 1}}); if (RocketChat.getUserPreference(user, 'autoImageLoad') === false) { return false; } diff --git a/packages/rocketchat-message-attachments/package.js b/packages/rocketchat-message-attachments/package.js index eaaa2c47f6fbb..571487cf2b427 100644 --- a/packages/rocketchat-message-attachments/package.js +++ b/packages/rocketchat-message-attachments/package.js @@ -9,7 +9,8 @@ Package.onUse(function(api) { api.use([ 'templating', 'ecmascript', - 'rocketchat:lib' + 'rocketchat:lib', + 'rocketchat:lazy-load' ]); api.addFiles('client/messageAttachment.html', 'client'); diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css index 48e69f558aafc..208c7b6f46ed6 100644 --- a/packages/rocketchat-theme/client/imports/general/base_old.css +++ b/packages/rocketchat-theme/client/imports/general/base_old.css @@ -3167,8 +3167,6 @@ max-height: 200px; cursor: pointer; - - opacity: 0; } } diff --git a/packages/rocketchat-ui/client/views/app/room.js b/packages/rocketchat-ui/client/views/app/room.js index 1748fef0a0f92..534540701c02b 100644 --- a/packages/rocketchat-ui/client/views/app/room.js +++ b/packages/rocketchat-ui/client/views/app/room.js @@ -6,6 +6,8 @@ import moment from 'moment'; import mime from 'mime-type/with-db'; import Clipboard from 'clipboard'; +import { lazyloadtick } from 'meteor/rocketchat:lazy-load'; + window.chatMessages = window.chatMessages || {}; const isSubscribed = _id => ChatSubscription.find({ rid: _id }).count() > 0; @@ -536,6 +538,9 @@ Template.room.events({ }, 'scroll .wrapper': _.throttle(function(e, t) { + + lazyloadtick(); + const $roomLeader = $('.room-leader'); if ($roomLeader.length) { if (e.target.scrollTop < lastScrollTop) { @@ -739,6 +744,9 @@ Template.room.events({ Template.room.onCreated(function() { // this.scrollOnBottom = true // this.typing = new msgTyping this.data._id + + lazyloadtick(); + this.showUsersOffline = new ReactiveVar(false); this.atBottom = FlowRouter.getQueryParam('msg') ? false : true; this.unreadCount = new ReactiveVar(0); @@ -898,6 +906,8 @@ Template.room.onRendered(function() { if (template.atBottom === true && template.isAtBottom() !== true) { template.sendToBottom(); } + + lazyloadtick(); }; template.sendToBottomIfNecessaryDebounced = _.debounce(template.sendToBottomIfNecessary, 10); diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js index 68782079277d5..343cd8152feb9 100644 --- a/packages/rocketchat-ui/package.js +++ b/packages/rocketchat-ui/package.js @@ -23,7 +23,8 @@ Package.onUse(function(api) { 'rocketchat:lib', 'rocketchat:ui-master', 'raix:push', - 'raix:ui-dropped-event' + 'raix:ui-dropped-event', + 'rocketchat:lazy-load' ]); api.use('kadira:flow-router', 'client'); From a6dfb6405011a031f04245919b7c10cf4a784d2d Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 27 Apr 2018 17:56:36 -0300 Subject: [PATCH 2/3] lazyload avatar on sidenav --- packages/rocketchat-lazy-load/client/index.js | 20 ++++++++++--------- .../client/lazyloadImage.js | 6 +++--- .../client/avatar/avatar.html | 6 +++++- .../client/avatar/avatar.js | 4 ++-- packages/rocketchat-ui-account/package.js | 3 ++- .../rocketchat-ui-sidenav/client/sideNav.js | 5 ++++- .../client/sidebarItem.html | 2 +- packages/rocketchat-ui-sidenav/package.js | 3 ++- 8 files changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/rocketchat-lazy-load/client/index.js b/packages/rocketchat-lazy-load/client/index.js index 905ecb1081092..edcad9e9d11a7 100644 --- a/packages/rocketchat-lazy-load/client/index.js +++ b/packages/rocketchat-lazy-load/client/index.js @@ -27,6 +27,7 @@ export const fixCordova = function(url) { const loadImage = el => { const img = new Image(); const src = el.getAttribute('data-src'); + el.className.replace('lazy-img', ''); img.onload = function() { el.src = src; el.removeAttribute('data-src'); @@ -35,22 +36,23 @@ const loadImage = el => { }; const isVisible = el => { - const rect = el.getBoundingClientRect(); - return ( - rect.top >= -100 && - rect.left >= 0 && - rect.top <= (window.innerHeight || document.documentElement.clientHeight) - ); + requestAnimationFrame(() => { + const rect = el.getBoundingClientRect(); + if (rect.top >= -100 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)) { + return loadImage(el); + } + }); + }; window.addEventListener('resize', window.lazyloadtick); export const lazyloadtick = _.debounce(() => { [...document.querySelectorAll('.lazy-img[data-src]')] - .filter(isVisible) - .forEach(loadImage); + + .forEach(isVisible); }, 500); window.lazyloadtick = lazyloadtick; -export const addImage = el => isVisible(el) && loadImage(el); +export const addImage = el => isVisible(el); diff --git a/packages/rocketchat-lazy-load/client/lazyloadImage.js b/packages/rocketchat-lazy-load/client/lazyloadImage.js index 3186f2f53e8fb..c8d6a637db0e6 100644 --- a/packages/rocketchat-lazy-load/client/lazyloadImage.js +++ b/packages/rocketchat-lazy-load/client/lazyloadImage.js @@ -3,12 +3,12 @@ import { addImage, fixCordova } from './'; Template.lazyloadImage.helpers({ lazy() { - const { preview, src } = this; + const { preview, src, placeholder } = this; - if (!preview) { + if (!preview && !placeholder) { return fixCordova(src); } - return `data:image/png;base64,${ preview }`; + return `data:image/png;base64,${ preview || 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8+/u3PQAJJAM0dIyWdgAAAABJRU5ErkJggg==' }`; } }); diff --git a/packages/rocketchat-ui-account/client/avatar/avatar.html b/packages/rocketchat-ui-account/client/avatar/avatar.html index 70781f54c7b56..de8f529657fee 100644 --- a/packages/rocketchat-ui-account/client/avatar/avatar.html +++ b/packages/rocketchat-ui-account/client/avatar/avatar.html @@ -1,5 +1,9 @@ diff --git a/packages/rocketchat-ui-account/client/avatar/avatar.js b/packages/rocketchat-ui-account/client/avatar/avatar.js index 555bf769cd7e7..27e00392a8cb4 100644 --- a/packages/rocketchat-ui-account/client/avatar/avatar.js +++ b/packages/rocketchat-ui-account/client/avatar/avatar.js @@ -1,5 +1,5 @@ Template.avatar.helpers({ - imageUrl() { + src() { let {url} = Template.instance().data; if (!url) { let username = this.username; @@ -18,6 +18,6 @@ Template.avatar.helpers({ url = getAvatarUrlFromUsername(username); } - return `background-image:url(${ url });`; + return url; } }); diff --git a/packages/rocketchat-ui-account/package.js b/packages/rocketchat-ui-account/package.js index 2d8ac01d4fa1b..fbdc651699aa3 100644 --- a/packages/rocketchat-ui-account/package.js +++ b/packages/rocketchat-ui-account/package.js @@ -15,7 +15,8 @@ Package.onUse(function(api) { 'ecmascript', 'templating', 'rocketchat:lib', - 'sha' + 'sha', + 'rocketchat:lazy-load' ]); api.addFiles('client/account.html', 'client'); diff --git a/packages/rocketchat-ui-sidenav/client/sideNav.js b/packages/rocketchat-ui-sidenav/client/sideNav.js index f360e188322ec..fb5ba7d0c720b 100644 --- a/packages/rocketchat-ui-sidenav/client/sideNav.js +++ b/packages/rocketchat-ui-sidenav/client/sideNav.js @@ -1,3 +1,5 @@ +import { lazyloadtick } from 'meteor/rocketchat:lazy-load'; + /* globals menu*/ Template.sideNav.helpers({ @@ -51,6 +53,7 @@ Template.sideNav.events({ }, 'scroll .rooms-list'() { + lazyloadtick(); return menu.updateUnreadBars(); }, @@ -62,7 +65,7 @@ Template.sideNav.events({ Template.sideNav.onRendered(function() { SideNav.init(); menu.init(); - + lazyloadtick(); const first_channel_login = RocketChat.settings.get('First_Channel_After_Login'); const room = RocketChat.roomTypes.findRoom('c', first_channel_login, Meteor.userId()); if (room !== undefined && room._id !== '') { diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.html b/packages/rocketchat-ui-sidenav/client/sidebarItem.html index b527528cf3940..54404f12dbe93 100644 --- a/packages/rocketchat-ui-sidenav/client/sidebarItem.html +++ b/packages/rocketchat-ui-sidenav/client/sidebarItem.html @@ -11,7 +11,7 @@ {{/if}} {{else}}
- {{> avatar username=username roomIcon=icon}} + {{> avatar username=username roomIcon=icon lazy=true}}
{{/if}}
diff --git a/packages/rocketchat-ui-sidenav/package.js b/packages/rocketchat-ui-sidenav/package.js index 752ba50ba5386..4345f9bb5ec06 100644 --- a/packages/rocketchat-ui-sidenav/package.js +++ b/packages/rocketchat-ui-sidenav/package.js @@ -15,7 +15,8 @@ Package.onUse(function(api) { 'ecmascript', 'templating', 'rocketchat:lib', - 'rocketchat:ui' + 'rocketchat:ui', + 'rocketchat:lazy-load' ]); api.addFiles('client/createCombinedFlex.html', 'client'); From b22f593e33114d1779b96fe909c5ff2b1e8c4132 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 2 May 2018 13:25:20 -0300 Subject: [PATCH 3/3] fix classname --- packages/rocketchat-lazy-load/client/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rocketchat-lazy-load/client/index.js b/packages/rocketchat-lazy-load/client/index.js index edcad9e9d11a7..9b525117e01b5 100644 --- a/packages/rocketchat-lazy-load/client/index.js +++ b/packages/rocketchat-lazy-load/client/index.js @@ -27,7 +27,7 @@ export const fixCordova = function(url) { const loadImage = el => { const img = new Image(); const src = el.getAttribute('data-src'); - el.className.replace('lazy-img', ''); + el.className = el.className.replace('lazy-img', ''); img.onload = function() { el.src = src; el.removeAttribute('data-src');