Add custom emoji lazyload

css/emoji-mart.css

@@ -137,7 +137,7 @@
 }
 
 .emoji-mart-category .emoji-mart-emoji:hover:before {
-  z-index: 0;
+  z-index: -1;
   content: "";
   position: absolute;
   top: 0; left: 0;

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "emoji-mart",
-  "version": "3.0.1",
+  "name": "emoji-mart-lazyload",
+  "version": "3.0.1h",
   "description": "Customizable Slack-like emoji picker for React",
   "main": "dist/index.js",
   "module": "dist-es/index.js",
   "repository": {
     "type": "git",
-    "url": "git@github.com:missive/emoji-mart.git"
+    "url": "git@github.com:mashirozx/emoji-mart.git"
   },
   "keywords": [
     "react",
@@ -16,11 +16,12 @@
   "author": "Etienne Lemay",
   "license": "BSD-3-Clause",
   "bugs": {
-    "url": "https://github.com/missive/emoji-mart/issues"
+    "url": "https://github.com/mashirozx/emoji-mart/issues"
   },
-  "homepage": "https://github.com/missive/emoji-mart",
+  "homepage": "https://github.com/mashirozx/emoji-mart",
   "dependencies": {
     "@babel/runtime": "^7.0.0",
+    "intersection-observer": "^0.12.0",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {

src/components/category.js

@@ -5,6 +5,7 @@ import frequently from '../utils/frequently'
 import { getData } from '../utils'
 import NimbleEmoji from './emoji/nimble-emoji'
 import NotFound from './not-found'
+import 'intersection-observer'
 
 export default class Category extends React.Component {
   constructor(props) {
@@ -13,6 +14,17 @@ export default class Category extends React.Component {
     this.data = props.data
     this.setContainerRef = this.setContainerRef.bind(this)
     this.setLabelRef = this.setLabelRef.bind(this)
+
+    this.imageObserver = new window.IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const image = entry.target;
+          image.src = image.dataset.src;
+          image.classList.remove("lazy");
+          this.imageObserver.unobserve(image);
+        }
+      });
+    });
   }
 
   componentDidMount() {
@@ -20,6 +32,17 @@ export default class Category extends React.Component {
     this.minMargin = 0
 
     this.memoizeSize()
+
+    this.lazyloadImages = []
+    this.lazyload()
+  }
+
+  componentDidUpdate() {
+    this.lazyload()
+  }
+
+  componentWillUnmount() {
+    this.removeLazyloadObserver()
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -47,7 +70,8 @@ export default class Category extends React.Component {
     }
 
     if (name == 'Search') {
-      shouldUpdate = !(emojis == nextEmojis)
+      // shouldUpdate = !(emojis == nextEmojis)
+      shouldUpdate = true
     }
 
     if (
@@ -84,6 +108,21 @@ export default class Category extends React.Component {
     }
   }
 
+  lazyload() {
+    this.removeLazyloadObserver()
+    this.lazyloadImages = this.container.querySelectorAll(".lazy");
+
+    this.lazyloadImages.forEach((image) => {
+      this.imageObserver.observe(image);
+    });
+  }
+
+  removeLazyloadObserver() {
+    this.lazyloadImages.forEach((image) => {
+      this.imageObserver.unobserve(image);
+    })
+  }
+
   handleScroll(scrollTop) {
     var margin = scrollTop - this.top
     margin = margin < this.minMargin ? this.minMargin : margin
@@ -211,7 +250,7 @@ export default class Category extends React.Component {
                   (emoji.short_names && emoji.short_names.join('_')) || emoji
                 }
               >
-                {NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
+                {NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps, lazy: true })}
               </li>
             ))}
         </ul>

src/components/emoji/nimble-emoji.js

@@ -152,6 +152,13 @@ const NimbleEmoji = (props) => {
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
       }
+      if(props.lazy){
+        delete style.backgroundImage
+        delete style.backgroundSize
+        delete style.backgroundRepeat
+        delete style.backgroundPosition
+        style.objectFit = 'contain'
+      }
     }
   } else {
     let setHasEmoji =
@@ -207,7 +214,18 @@ const NimbleEmoji = (props) => {
         className={className}
         {...Tag.props}
       >
-        <span style={style}>{children}</span>
+        {
+          custom && !data.spriteUrl && props.lazy
+          ?
+          <img
+            style={style}
+            className="lazy"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP89B8AAukB8/71MdcAAAAASUVORK5CYII="
+            data-src={imageUrl}
+          />
+          :
+          <span style={style}>{children}</span>
+        }
       </Tag.name>
     )
   }