From 2b6a25c609e2d1814e5dd586e9f40868d944c8bc Mon Sep 17 00:00:00 2001
From: Mashiro <moezhx@outlook.com>
Date: Fri, 19 Nov 2021 05:01:31 +0800
Subject: [PATCH] Add lazy load to emoji-mart (#16907)

* perf: lazyload emoji-mart!

* Bump lazyload
---
 app/javascript/styles/mastodon/emoji_picker.scss | 5 +++--
 package.json                                     | 2 +-
 yarn.lock                                        | 9 +++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index adddd4533..e025c97ed 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -169,14 +169,15 @@
   }
 
   &:hover::before {
-    z-index: 0;
+    z-index: -1;
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($ui-secondary-color, 0.7);
+    // background-color: rgba($ui-secondary-color, 0.7);
+    background-color: #f4f4f4;
     border-radius: 100%;
   }
 }
diff --git a/package.json b/package.json
index 574f813f5..477409119 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "cssnano": "^4.1.11",
     "detect-passive-events": "^2.0.3",
     "dotenv": "^10.0.0",
-    "emoji-mart": "^3.0.1",
+    "emoji-mart": "npm:emoji-mart-lazyload",
     "es6-symbol": "^3.1.3",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
diff --git a/yarn.lock b/yarn.lock
index d4cf7c3f4..1d9b95f8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3962,12 +3962,13 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
-emoji-mart@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-3.0.1.tgz#9ce86706e02aea0506345f98464814a662ca54c6"
-  integrity sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==
+"emoji-mart@npm:emoji-mart-lazyload":
+  version "3.0.1-j"
+  resolved "https://registry.npmjs.org/emoji-mart-lazyload/-/emoji-mart-lazyload-3.0.1-j.tgz#87a90d30b79d9145ece078d53e3e683c1a10ce9c"
+  integrity sha512-0wKF7MR0/iAeCIoiBLY+JjXCugycTgYRC2SL0y9/bjNSQlbeMdzILmPQJAufU/mgLFDUitOvjxLDhOZ9yxZ48g==
   dependencies:
     "@babel/runtime" "^7.0.0"
+    intersection-observer "^0.12.0"
     prop-types "^15.6.0"
 
 emoji-regex@^7.0.1: