From b475377f646f087345e881ed5bbe18e4ede4f77a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 14:34:38 +0800
Subject: [PATCH] feat(editor): show fetching state of name auto complete

---
 components/tiptap/TiptapMentionList.vue | 13 +++++++++----
 composables/masto.ts                    |  2 ++
 composables/tiptap/suggestion.ts        |  6 +++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/tiptap/TiptapMentionList.vue b/components/tiptap/TiptapMentionList.vue
index d60ef70a..6a3adb5e 100644
--- a/components/tiptap/TiptapMentionList.vue
+++ b/components/tiptap/TiptapMentionList.vue
@@ -4,6 +4,7 @@ import type { Account } from 'masto'
 const { items, command } = defineProps<{
   items: Account[]
   command: Function
+  isPending?: boolean
 }>()
 
 let selectedIndex = $ref(0)
@@ -41,7 +42,13 @@ defineExpose({
 </script>
 
 <template>
-  <div relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
+  <div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
+    <template v-if="isPending">
+      <div flex gap-1 items-center p2 animate-pulse>
+        <div i-ri:loader-2-line animate-spin />
+        <span>Fetching...</span>
+      </div>
+    </template>
     <template v-if="items.length">
       <button
         v-for="(item, index) in items"
@@ -53,8 +60,6 @@ defineExpose({
         <AccountInfo :account="item" />
       </button>
     </template>
-    <div v-else block m0 w-full text-left px2 py1 italic op30>
-      No result
-    </div>
   </div>
+  <div v-else />
 </template>
diff --git a/composables/masto.ts b/composables/masto.ts
index 9872ddfa..54e1de02 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -48,6 +48,8 @@ export function getDisplayName(account?: Account, options?: { rich?: boolean })
 }
 
 export function getShortHandle({ acct }: Account) {
+  if (!acct)
+    return ''
   return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
 }
 
diff --git a/composables/tiptap/suggestion.ts b/composables/tiptap/suggestion.ts
index a0084ea1..c5694aa9 100644
--- a/composables/tiptap/suggestion.ts
+++ b/composables/tiptap/suggestion.ts
@@ -58,8 +58,12 @@ function createSuggestionRenderer(): SuggestionOptions['render'] {
         })
       },
 
+      onBeforeUpdate(props) {
+        component.updateProps({ ...props, isPending: true })
+      },
+
       onUpdate(props) {
-        component.updateProps(props)
+        component.updateProps({ ...props, isPending: false })
 
         if (!props.clientRect)
           return