feat: show search widget while loading

components/search/SearchWidget.vue

@@ -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"

composables/search.ts

@@ -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

layouts/default.vue

@@ -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>