Skip to content

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

@SCP002

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions