Search loading anim (#1036)

pages/search/[searchProjectType].vue

@@ -284,7 +284,8 @@
         class="pagination-before"
         @switch-page="onSearchChange"
       />
-      <div v-if="results && results.hits && results.hits.length === 0" class="no-results">
+      <LogoAnimated v-if="searchLoading && !noLoad"></LogoAnimated>
+      <div v-else-if="results && results.hits && results.hits.length === 0" class="no-results">
         <p>No results found for your query!</p>
       </div>
       <div v-else class="search-results-container">
@@ -336,6 +337,7 @@ import ProjectCard from '~/components/ui/ProjectCard'
 import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
 import Checkbox from '~/components/ui/Checkbox'
+import LogoAnimated from '~/components/brand/LogoAnimated'
 
 import ClientIcon from '~/assets/images/categories/client.svg'
 import ServerIcon from '~/assets/images/categories/server.svg'
@@ -351,6 +353,7 @@ import Promotion from '~/components/ads/Promotion.vue'
 
 export default defineNuxtComponent({
   components: {
+    LogoAnimated,
     Promotion,
     ProjectCard,
     Pagination,
@@ -465,11 +468,13 @@ export default defineNuxtComponent({
       (x) => x.id === route.path.substring(1, route.path.length - 1)
     )
 
+    const noLoad = ref(false)
     const {
       data: rawResults,
       refresh: refreshSearch,
-      pending,
-    } = useLazyFetch(() => {
+      pending: searchLoading,
+    } = useLazyFetch(
+      () => {
         const config = useRuntimeConfig()
         const base = process.server ? config.apiBaseUrl : config.public.apiBaseUrl
 
@@ -506,7 +511,9 @@ export default defineNuxtComponent({
             )
           } else if (projectType.value.id === 'datapack') {
             formattedFacets.push(
-            data.$tag.loaderData.dataPackLoaders.map((x) => `categories:'${encodeURIComponent(x)}'`)
+              data.$tag.loaderData.dataPackLoaders.map(
+                (x) => `categories:'${encodeURIComponent(x)}'`
+              )
             )
           }
 
@@ -568,15 +575,14 @@ export default defineNuxtComponent({
         }
 
         return `${base}${url}`
-    })
-
-    watch(pending, (newVal) => {
-      if (newVal) {
-        startLoading()
-      } else {
-        stopLoading()
+      },
+      {
+        transform(hits) {
+          noLoad.value = false
+          return hits
+        },
       }
-    })
+    )
 
     const results = shallowRef(toRaw(rawResults))
     const pageCount = computed(() =>
@@ -584,6 +590,9 @@ export default defineNuxtComponent({
     )
 
     const onSearchChange = (newPageNumber) => {
+      noLoad.value = true
+      console.log(noLoad.value)
+
       currentPage.value = newPageNumber
 
       if (query.value === null) {
@@ -674,6 +683,8 @@ export default defineNuxtComponent({
       projectType,
       onSearchChange,
       getSearchUrl,
+      searchLoading,
+      noLoad,
     }
   },
   computed: {