From c70cdbb873eb77bc1aaf7edb9defdda59bdba1e1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Oct 2021 23:23:58 -0400
Subject: [PATCH] Use lozad for lazy image loading

Ref: grouped-emoji-picker
---
 package.json                                 |  1 +
 src/components/emoji_picker/emoji_picker.js  |  6 +++++-
 src/components/emoji_picker/emoji_picker.vue |  3 ++-
 src/directives/lazy_image_container.js       | 13 +++++++++++++
 yarn.lock                                    |  5 +++++
 5 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/directives/lazy_image_container.js

diff --git a/package.json b/package.json
index 50a6b55f..06fb4916 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "js-cookie": "3.0.1",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
+    "lozad": "^1.16.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1.5.0",
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 8e11f83f..82e5ad0b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import LazyImageContainer from '../../directives/lazy_image_container'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -64,6 +65,9 @@ const EmojiPicker = {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
+  directives: {
+    LazyImageContainer
+  },
   methods: {
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
@@ -184,7 +188,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     limitedEmojis (list, groupId) {
-      return list.slice(0, this.loadedCount[groupId])
+      return list // list.slice(0, this.loadedCount[groupId])
     },
     filterByKeyword (list, keyword) {
       return filterByKeyword(list, keyword)
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 7b2b7fc8..0e6c7e41 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -62,6 +62,7 @@
         </div>
         <div
           ref="emoji-groups"
+          v-lazy-image-container
           class="emoji-groups"
           :class="groupsScrolledClass"
           @scroll="onScroll"
@@ -87,7 +88,7 @@
               <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
               <img
                 v-else
-                :src="emoji.imageUrl"
+                :data-src="emoji.imageUrl"
               >
             </span>
             <span :ref="'group-end-' + group.id" />
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
new file mode 100644
index 00000000..44adc828
--- /dev/null
+++ b/src/directives/lazy_image_container.js
@@ -0,0 +1,13 @@
+
+import lozad from 'lozad'
+
+const LazyImageContainer = {
+  inserted (el) {
+    const images = el.querySelectorAll('img')
+    console.log(images.length)
+    el.$observer = lozad(images)
+    el.$observer.observe()
+  }
+}
+
+export default LazyImageContainer
diff --git a/yarn.lock b/yarn.lock
index 2fefe76f..041fc1dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5733,6 +5733,11 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lozad@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
+  integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"