patch: improve emoji measurement and layout stability

Author: ealush

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.15.1",
+  "version": "4.15.2",
   "license": "MIT",
   "main": "dist/index.js",
   "homepage": "https://ealush.com/emoji-picker-react",

src/components/body/EmojiCategory.tsx

@@ -52,6 +52,8 @@ export function EmojiCategory({
 const styles = stylesheet.create({
   category: {
     '.': ClassNames.category,
+    minHeight:
+      'calc(var(--epr-emoji-fullsize) + var(--epr-category-label-height))',
     position: 'relative'
   },
   categoryContent: {

src/components/body/EmojiList.tsx

@@ -16,6 +16,7 @@ import { useEmojiListRef } from '../context/ElementRefContext';
 import { useVisibleCategoriesState } from '../context/PickerContext';
 
 import { EmojiCategory } from './EmojiCategory';
+import { MeasureEmoji } from './MeasureEmoji';
 
 export function EmojiList({ scrollTop }: { scrollTop: number }) {
   const categories = useCategoriesConfig();
@@ -30,6 +31,7 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
   let topOffset = 0;
   return (
     <ul className={cx(styles.emojiList)} ref={EmojiListRef}>
+      <MeasureEmoji />
       {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 

src/components/body/MeasureEmoji.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import {
+  categoryFromCategoryConfig
+} from '../../config/categoryConfig';
+import {
+  useCategoriesConfig,
+  useEmojiStyleConfig,
+  useGetEmojiUrlConfig,
+  useLazyLoadEmojisConfig
+} from '../../config/useConfig';
+import {
+  useGetEmojisByCategory,
+  emojiUnified
+} from '../../dataUtils/emojiSelectors';
+import { useActiveSkinToneState, useEmojiSizeState } from '../context/PickerContext';
+import { ClickableEmoji } from '../emoji/Emoji';
+
+export function MeasureEmoji() {
+  const categories = useCategoriesConfig();
+  const getEmojisByCategory = useGetEmojisByCategory();
+  const emojiStyle = useEmojiStyleConfig();
+  const getEmojiUrl = useGetEmojiUrlConfig();
+  const lazyLoadEmojis = useLazyLoadEmojisConfig();
+  const [activeSkinTone] = useActiveSkinToneState();
+  const [emojiSize, setEmojiSize] = useEmojiSizeState();
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      setEmojiSize(ref.current.clientHeight);
+    }
+  });
+
+  if (emojiSize) {
+    return null;
+  }
+
+  const firstCategory = categories[0];
+  const dummyEmoji = getEmojisByCategory(
+    categoryFromCategoryConfig(firstCategory)
+  )[0];
+  const unified = dummyEmoji
+    ? emojiUnified(dummyEmoji, activeSkinTone)
+    : '';
+
+  if (!dummyEmoji) {
+    return null;
+  }
+
+  return (
+    <div ref={ref}>
+      <ClickableEmoji
+        emoji={dummyEmoji}
+        unified={unified}
+        emojiStyle={emojiStyle}
+        getEmojiUrl={getEmojiUrl}
+        lazyLoad={lazyLoadEmojis}
+        showVariations={false}
+        hidden={false}
+        style={{
+          opacity: 0,
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          zIndex: -1,
+          height: 'var(--epr-emoji-fullsize)',
+          width: 'var(--epr-emoji-fullsize)'
+        }}
+      />
+    </div>
+  );
+}

src/components/context/PickerContext.tsx

@@ -36,6 +36,7 @@ export function PickerContextProvider({ children }: Props) {
   const reactionsModeState = useState(reactionsDefaultOpen);
   const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
   const visibleCategoriesState = useState<string[]>([]);
+  const emojiSizeState = useState<number | null>(null);
 
   useMarkInitialLoad(setIsPastInitialLoad);
 
@@ -55,7 +56,8 @@ export function PickerContextProvider({ children }: Props) {
         skinToneFanOpenState,
         suggestedUpdateState,
         reactionsModeState,
-        visibleCategoriesState
+        visibleCategoriesState,
+        emojiSizeState
       }}
     >
       {children}
@@ -80,6 +82,7 @@ const PickerContext = React.createContext<{
   disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
   reactionsModeState: ReactState<boolean>;
   visibleCategoriesState: ReactState<Array<string>>;
+  emojiSizeState: ReactState<number | null>;
 }>({
   activeCategoryState: [null, () => {}],
   activeSkinTone: [SkinTones.NEUTRAL, () => {}],
@@ -94,7 +97,8 @@ const PickerContext = React.createContext<{
   skinToneFanOpenState: [false, () => {}],
   suggestedUpdateState: [Date.now(), () => {}],
   reactionsModeState: [false, () => {}],
-  visibleCategoriesState: [[], () => []]
+  visibleCategoriesState: [[], () => []],
+  emojiSizeState: [null, () => {}]
 });
 
 type Props = Readonly<{
@@ -164,6 +168,11 @@ export function useVisibleCategoriesState() {
   return visibleCategoriesState;
 }
 
+export function useEmojiSizeState() {
+  const { emojiSizeState } = React.useContext(PickerContext);
+  return emojiSizeState;
+}
+
 export function useUpdateSuggested(): [number, () => void] {
   const { suggestedUpdateState } = React.useContext(PickerContext);
 

src/hooks/useCategoryHeight.ts

@@ -3,18 +3,17 @@ import * as React from 'react';
 import { EmojiButtonSelector } from '../DomUtils/selectors';
 import {
   useEmojiListRef,
-  usePickerMainRef
+  usePickerMainRef,
 } from '../components/context/ElementRefContext';
 import {
   useReactionsModeState,
-  useVisibleCategoriesState
+  useVisibleCategoriesState,
+  useEmojiSizeState,
 } from '../components/context/PickerContext';
 
-const EMOJI_SIZE_DEFAULT = 32;
+const EMOJI_SIZE_DEFAULT = 40;
 
-export function useCategoryHeight(
-  emojiCount: number
-):
+export function useCategoryHeight(emojiCount: number):
   | {
       categoryHeight: number;
       emojisPerRow: number;
@@ -26,6 +25,7 @@ export function useCategoryHeight(
   const PickerMainRef = usePickerMainRef();
   const emojiSizeRef = React.useRef<number | undefined>();
   const [visibleCategories] = useVisibleCategoriesState();
+  const [emojiSizeFromContext] = useEmojiSizeState();
   const [dimensions, setDimensions] = React.useState<{
     categoryHeight: number;
     emojisPerRow: number;
@@ -38,12 +38,18 @@ export function useCategoryHeight(
     if (!listEl) return;
 
     const emojiElement = listEl.querySelector(
-      EmojiButtonSelector
+      EmojiButtonSelector,
     ) as HTMLElement | null;
 
     const measured = emojiElement?.clientHeight;
-    const emojiSize = measured ?? emojiSizeRef.current ?? EMOJI_SIZE_DEFAULT;
-    emojiSizeRef.current = emojiSize;
+    if (measured) {
+      emojiSizeRef.current = measured;
+    }
+    const emojiSize =
+      emojiSizeFromContext ||
+      measured ||
+      emojiSizeRef.current ||
+      EMOJI_SIZE_DEFAULT;
     const pickerWidth = listEl.clientWidth;
 
     if (pickerWidth === 0 || emojiSize === 0) return;
@@ -53,7 +59,7 @@ export function useCategoryHeight(
     const categoryHeight = rowCount * emojiSize;
 
     setDimensions({ categoryHeight, emojisPerRow, emojiSize });
-  }, [EmojiListRef, emojiCount]);
+  }, [EmojiListRef, emojiCount, emojiSizeFromContext]);
 
   // Recompute on data-count changes and when reactions mode toggles
   React.useEffect(() => {
@@ -62,7 +68,7 @@ export function useCategoryHeight(
     emojiCount,
     isReactionsMode,
     computeAndSetDimensions,
-    visibleCategories.length
+    visibleCategories.length,
   ]);
 
   // Listen to transitionend on the picker root (where height transition occurs)
@@ -90,7 +96,7 @@ export function useCategoryHeight(
     };
 
     rootEl.addEventListener('transitionend', handler, {
-      passive: true
+      passive: true,
     });
     return () => {
       rootEl.removeEventListener('transitionend', handler);

src/hooks/useEmojiVirtualization.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useEffect } from 'react';
+ 
+ import { ReactNode, useEffect } from 'react';
 import * as React from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
@@ -61,20 +62,22 @@ export function useEmojiVirtualization({
     }
   }, [dimensions, onHeightReady, emojisToPush.length]);
 
+  const isVirtualized = (style: { top: number; left: number } | undefined) =>
+    dimensions &&
+    BodyRef.current &&
+    shouldVirtualize({
+      scrollTop,
+      clientHeight: BodyRef.current?.clientHeight ?? 0,
+      topOffset,
+      style,
+      dimensions
+    });
+
   const emojis = emojisToPush.reduce((accumulator, emoji, index) => {
     const unified = emojiUnified(emoji, activeSkinTone);
     const style = getEmojiPositionStyle(dimensions, index);
-    if (
-      dimensions &&
-      BodyRef.current &&
-      shouldVirtualize({
-        scrollTop,
-        clientHeight: BodyRef.current?.clientHeight ?? 0,
-        topOffset,
-        style,
-        dimensions
-      })
-    ) {
+
+    if (isVirtualized(style)) {
       virtualizedCounter++;
       preloadEmojiIfNeeded(
         emoji,