From 78081836dfa40abdb587dcbca59d339a27e23fb2 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 24 Dec 2022 12:43:30 -0500
Subject: [PATCH] Remove lozad code

---
 src/components/emoji_picker/emoji_picker.js  | 40 --------------------
 src/components/emoji_picker/emoji_picker.vue |  4 +-
 src/components/still-image/still-image.js    |  3 +-
 src/components/still-image/still-image.vue   |  1 +
 4 files changed, 5 insertions(+), 43 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 2838e1021a..68240fd89c 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -3,7 +3,6 @@ import Checkbox from '../checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import StillImage from '../still-image/still-image.vue'
 import { ensureFinalFallback } from '../../i18n/languages.js'
-import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -125,9 +124,6 @@ const EmojiPicker = {
     setGroupRef (name) {
       return el => { this.groupRefs[name] = el }
     },
-    setEmojiRef (name) {
-      return el => { this.emojiRefs[name] = el }
-    },
     onPopoverShown () {
       this.$emit('show')
     },
@@ -208,43 +204,12 @@ const EmojiPicker = {
     filterByKeyword (list, keyword) {
       return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
     },
-    initializeLazyLoad () {
-      this.destroyLazyLoad()
-      this.$nextTick(() => {
-        this.$lozad = lozad('.still-image.emoji-picker-emoji', {
-          load: el => {
-            const name = el.getAttribute('data-emoji-name')
-            const vn = this.emojiRefs[name]
-            if (!vn) {
-              return
-            }
-
-            vn.loadLazy()
-          }
-        })
-        this.$lozad.observe()
-      })
-    },
-    waitForDomAndInitializeLazyLoad () {
-      this.$nextTick(() => this.initializeLazyLoad())
-    },
-    destroyLazyLoad () {
-      if (this.$lozad) {
-        if (this.$lozad.observer) {
-          this.$lozad.observer.disconnect()
-        }
-        if (this.$lozad.mutationObserver) {
-          this.$lozad.mutationObserver.disconnect()
-        }
-      }
-    },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
       this.$nextTick(() => {
         this.$refs.search.focus()
       })
       this.contentLoaded = true
-      this.waitForDomAndInitializeLazyLoad()
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       if (!oldContentLoaded) {
         this.$nextTick(() => {
@@ -269,13 +234,9 @@ const EmojiPicker = {
       this.debouncedHandleKeywordChange()
     },
     allCustomGroups () {
-      this.waitForDomAndInitializeLazyLoad()
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
     }
   },
-  destroyed () {
-    this.destroyLazyLoad()
-  },
   computed: {
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
@@ -314,7 +275,6 @@ const EmojiPicker = {
     },
     debouncedHandleKeywordChange () {
       return debounce(() => {
-        this.waitForDomAndInitializeLazyLoad()
         this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       }, 500)
     },
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ff56d63739..d0b7fe8f9a 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -104,9 +104,9 @@
                 >{{ emoji.replacement }}</span>
                 <still-image
                   v-else
-                  :ref="setEmojiRef(group.id + emoji.displayText)"
                   class="emoji-picker-emoji -custom"
-                  :data-src="emoji.imageUrl"
+                  loading="lazy"
+                  :src="emoji.imageUrl"
                   :data-emoji-name="group.id + emoji.displayText"
                 />
               </span>
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 200ef147d1..56fd2fd98b 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -8,7 +8,8 @@ const StillImage = {
     'alt',
     'height',
     'width',
-    'dataSrc'
+    'dataSrc',
+    'loading'
   ],
   data () {
     return {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 633fb229b6..d015e138cc 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -17,6 +17,7 @@
       :data-src="dataSrc"
       :src="realSrc"
       :referrerpolicy="referrerpolicy"
+      :loading="loading"
       @load="onLoad"
       @error="onError"
     >