feat: show search widget while loading

This commit is contained in:
patak 2022-12-22 11:34:35 +01:00
parent fb649807b0
commit 30e9c3d773
3 changed files with 7 additions and 6 deletions

View file

@ -52,7 +52,7 @@ const activate = () => {
<template>
<div ref="el" relative px4 py2 group>
<div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative outline-primary outline-1 focus-within:outline transition-all transition-duration-500>
<div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative outline-primary outline-1 focus-within:outline>
<div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" />
<input
ref="input"

View file

@ -1,20 +1,21 @@
import type { MaybeRef } from '@vueuse/core'
import type { Account, Status } from 'masto'
import type { Account, Paginator, Results, SearchParams, Status } from 'masto'
export interface UseSearchOptions {
type?: MaybeRef<'accounts' | 'hashtags' | 'statuses'>
}
export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
let paginator = useMasto().search({ q: unref(query), type: unref(options?.type) })
const done = ref(false)
const loading = ref(false)
const statuses = ref<Status[]>([])
const accounts = ref<Account[]>([])
const hashtags = ref<any[]>([])
let paginator: Paginator<SearchParams, Results> | undefined
debouncedWatch(() => unref(query), async () => {
if (!unref(query))
if (!unref(query) || !isMastoInitialised.value)
return
loading.value = true
@ -36,7 +37,7 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
}, { debounce: 500 })
const next = async () => {
if (!unref(query))
if (!unref(query) || !isMastoInitialised.value || !paginator)
return
loading.value = true

View file

@ -51,7 +51,7 @@
<aside class="hidden sm:none lg:block w-1/4 zen-hide">
<div sticky top-0 h-screen flex="~ col" py3>
<slot name="right">
<SearchWidget v-if="isMastoInitialised" />
<SearchWidget />
<div flex-auto />
<NavFooter />
</slot>