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

This commit is contained in:
Anthony Fu 2022-11-27 14:34:38 +08:00
parent 8dd91002d7
commit b475377f64
3 changed files with 16 additions and 5 deletions

View file

@ -4,6 +4,7 @@ import type { Account } from 'masto'
const { items, command } = defineProps<{ const { items, command } = defineProps<{
items: Account[] items: Account[]
command: Function command: Function
isPending?: boolean
}>() }>()
let selectedIndex = $ref(0) let selectedIndex = $ref(0)
@ -41,7 +42,13 @@ defineExpose({
</script> </script>
<template> <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"> <template v-if="items.length">
<button <button
v-for="(item, index) in items" v-for="(item, index) in items"
@ -53,8 +60,6 @@ defineExpose({
<AccountInfo :account="item" /> <AccountInfo :account="item" />
</button> </button>
</template> </template>
<div v-else block m0 w-full text-left px2 py1 italic op30>
No result
</div>
</div> </div>
<div v-else />
</template> </template>

View file

@ -48,6 +48,8 @@ export function getDisplayName(account?: Account, options?: { rich?: boolean })
} }
export function getShortHandle({ acct }: Account) { export function getShortHandle({ acct }: Account) {
if (!acct)
return ''
return `@${acct.includes('@') ? acct.split('@')[0] : acct}` return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
} }

View file

@ -58,8 +58,12 @@ function createSuggestionRenderer(): SuggestionOptions['render'] {
}) })
}, },
onBeforeUpdate(props) {
component.updateProps({ ...props, isPending: true })
},
onUpdate(props) { onUpdate(props) {
component.updateProps(props) component.updateProps({ ...props, isPending: false })
if (!props.clientRect) if (!props.clientRect)
return return