feat(editor): show fetching state of name auto complete

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>

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}`
 }
 

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