Merge branch 'emoji-picker-suspense' into 'main'

Wrap EmojiPicker with a Suspense boundary

See merge request soapbox-pub/soapbox!2786
This commit is contained in:
Alex Gleason 2023-10-10 16:17:25 +00:00
commit 8bedf92ec8
1 changed files with 18 additions and 16 deletions

View File

@ -1,5 +1,5 @@
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import React, { useEffect, useState, useLayoutEffect } from 'react'; import React, { useEffect, useState, useLayoutEffect, Suspense } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
@ -215,6 +215,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
return ( return (
visible ? ( visible ? (
<RenderAfter update={update}> <RenderAfter update={update}>
<Suspense>
<EmojiPicker <EmojiPicker
custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined} custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
title={title} title={title}
@ -230,6 +231,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
skinTonePosition='search' skinTonePosition='search'
previewPosition='none' previewPosition='none'
/> />
</Suspense>
</RenderAfter> </RenderAfter>
) : null ) : null
); );