From 30e9c3d7733adb3049150219abd6918e0d5a1e42 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 22 Dec 2022 11:34:35 +0100
Subject: [PATCH] feat: show search widget while loading

---
 components/search/SearchWidget.vue | 2 +-
 composables/search.ts              | 9 +++++----
 layouts/default.vue                | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index 25563771..373a5633 100644
--- a/components/search/SearchWidget.vue
+++ b/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"
diff --git a/composables/search.ts b/composables/search.ts
index d9434291..770a92a8 100644
--- a/composables/search.ts
+++ b/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
diff --git a/layouts/default.vue b/layouts/default.vue
index 2efbe01b..36ecee92 100644
--- a/layouts/default.vue
+++ b/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>