perf: use content-visibility for custom emoji

.github/workflows/benchmarks.yml

@@ -102,3 +102,18 @@ jobs:
           path: test/benchmark/search.results.json
           pr-bench-name: this-change
           base-bench-name: tip-of-tree
+
+      # many-custom-emoji
+      - name: Benchmark many-custom-emoji
+        run: |
+          ./node_modules/.bin/tach \
+            --config ./test/benchmark/many-custom-emoji.tachometer.json \
+            --json-file ./test/benchmark/many-custom-emoji.results.json
+
+      - name: Report many-custom-emoji
+        uses: andrewiggins/tachometer-reporter-action@v2
+        with:
+          report-id: emoji-picker-element-many-custom-emoji
+          path: test/benchmark/many-custom-emoji.results.json
+          pr-bench-name: this-change
+          base-bench-name: tip-of-tree

src/picker/components/Picker/PickerTemplate.js

@@ -187,10 +187,16 @@ export function render (container, state, helpers, events, actions, refs, abortS
                     )
                 }
           </div>
-          <div class="emoji-menu"
+            <!-- 
+              Improve performance in custom emoji by using \`content-visibility: auto\` on every category 
+              The \`--num-rows\` is also used in these calculations to contain the intrinsic height
+            -->
+          <div class="emoji-menu ${!state.searchMode && emojiWithCategory.category ? 'hide-offscreen' : ''}"
+               style=${`--num-rows: ${Math.ceil(emojiWithCategory.emojis.length / state.numColumns)}`}
                role="${state.searchMode ? 'listbox' : 'menu'}"
                aria-labelledby="menu-label-${i}"
-               id=${state.searchMode ? 'search-results' : ''}>
+               id=${state.searchMode ? 'search-results' : ''}
+          >
             ${
               emojiList(emojiWithCategory.emojis, state.searchMode, /* prefix */ 'emo')
             }

src/picker/styles/picker.scss

@@ -69,6 +69,16 @@ $skintoneZIndex3: 3;
   justify-content: space-around;
   align-items: flex-start;
   width: 100%;
+
+  // Improve performance in custom emoji by using `content-visibility: auto` on every category
+  &.hide-offscreen {
+    content-visibility: auto;
+    contain-intrinsic-size:
+      // width
+      calc(var(--num-columns) * var(--total-emoji-size))
+      // height
+      calc(var(--num-rows) * var(--total-emoji-size));
+  }
 }
 
 .category {
@@ -104,6 +114,7 @@ button.emoji,
   &.active {
     background: var(--button-active-background);
   }
+
 }
 
 .custom-emoji {

test/benchmark/benchmark.js

@@ -24,4 +24,6 @@ if (benchmark === 'first-load') {
   await import('./change-tab.benchmark.js')
 } else if (benchmark === 'search') {
   await import('./search.benchmark.js')
+} else if (benchmark === 'many-custom-emoji') {
+  await import('./many-custom-emoji.benchmark.js')
 }