Skip to content

[Violation] 'message' handler took <X>ms #28

Description

@SCP002

When adding:

<EmojiPicker.Root>
  <EmojiPicker.Search />
  <EmojiPicker.Viewport>
    <EmojiPicker.Loading>Loading...</EmojiPicker.Loading>
    <EmojiPicker.Empty>No emoji found.</EmojiPicker.Empty>
    <EmojiPicker.List />
  </EmojiPicker.Viewport>
</EmojiPicker.Root>

to the page, message:

[Violation] 'message' handler took 150ms

appears in dev. console, and emoji picker load time is noticeable.

Even worse, as soon as I use:

<EmojiPicker.List
  components={{
    CategoryHeader: CategoryComponent,
    Row: RowComponent,
    Emoji: EmojiComponent,
  }}
/>

to build my own pretty-looking emoji picker, load time grows dramatically:

react-dom_client.js?v=1e4bf3d8:16 [Violation] 'message' handler took 644ms.

My project is using Vite, and Chakra UI library.

Related package versions:

  "dependencies": {
    "frimousse": "^0.3.0",
    "react": "^19.2.1",
    "react-dom": "^19.2.1",
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.6.0",
    "typescript": "~5.8.3",
    "vite": "^7.0.4"
  }

Notes:

  1. It is not about first load, it happens on every page refresh / popup open.
  2. Tried:
<EmojiPicker.Root
  emojibaseUrl="/node_modules/emojibase-data"
>

-- it does not help.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions