feat(ui): add emojiPicker loading suspense

anse-app · May 6, 2023 · cd3c2b8 · cd3c2b8
1 parent bf9e621
commit cd3c2b8
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/components/ui/EmojiPickerModal.tsx b/src/components/ui/EmojiPickerModal.tsx
@@ -1,4 +1,4 @@
-import { createSignal } from 'solid-js'
+import { Suspense, createSignal } from 'solid-js'
 import { EmojiPicker } from 'solid-emoji-picker'
 import { emojiPickerCurrentPick, showEmojiPickerModal } from '@/stores/ui'
 import type { Emoji } from 'solid-emoji-picker'
@@ -32,10 +32,12 @@ export default () => {
         />
       </div>
       <div class="mt-2 -mx-1 h-[16rem] overflow-auto">
-        <EmojiPicker
-          filter={emojiFilter}
-          onEmojiClick={handleEmojiPick}
-        />
+        <Suspense fallback={<div class="mt-[8rem] mx-auto fcc text-base i-carbon:circle-solid  text-slate-400 animate-ping" />}>
+          <EmojiPicker
+            filter={emojiFilter}
+            onEmojiClick={handleEmojiPick}
+          />
+        </Suspense>
       </div>
     </div>
   )