Add lazy load to emoji-mart (#16907)

* perf: lazyload emoji-mart!

* Bump lazyload

diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index adddd453349c3d39f150a85bb09d922117571bdd..e025c97edcf41ce8c5fc33b5f3c52edd189fcf84 100644 (file)
--- 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 574f813f56b744e17fcaa18ad88d5cfd623af723..477409119e10553c58fe17c45f225be8fbafc310 100644 (file)
--- 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 d4cf7c3f48ff7b1f0333c95f9100f89fad4a8531..1d9b95f8d1da6f6e94883a6b2e00f0ce430bf000 100644 (file)
--- 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: