Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Eable visual loading state for list search

Browse source
This commit is contained in:
Sam Carlton 2022-05-25 12:05:31 -05:00
parent 559a5c4e3d
commit e6f520ca45
1 changed files with 33 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/search-stork.vue
View file

@ -25,7 +25,7 @@
type="search" type="search"
placeholder="Type to Search" placeholder="Type to Search"
autocomplete="off" autocomplete="off"
@keyup="queryResults(query); scrollInputToTop()" @keyup="handleSearchInput"
> >
<div class="search-input-separator border-white border-t-2" /> <div class="search-input-separator border-white border-t-2" />
</div> </div>
@ -75,6 +75,9 @@
:key="`listings-chunk-${i}`" :key="`listings-chunk-${i}`"
class="listings-container divide-y divide-gray-700" class="listings-container divide-y divide-gray-700"
> >
<!-- <pre>
{{ listings }}
</pre> -->
<li <li
v-for="(listing, i) in listings" v-for="(listing, i) in listings"
:key="`${ listing.slug }-${i}`" :key="`${ listing.slug }-${i}`"
@ -271,7 +274,8 @@ export default {
return { return {
query: '', query: '',
hasStartedAnyQuery: false, hasStartedAnyQuery: false,
listingsResults: [] listingsResults: [],
waitingForQuery: false
} }
}, },
computed: { computed: {
@ -282,6 +286,9 @@ export default {
return this.initialLimit !== null ? this.appList.slice(0, this.initialLimit) : this.appList return this.initialLimit !== null ? this.appList.slice(0, this.initialLimit) : this.appList
}, },
listings () { listings () {
// Build filler listings to use while loading results
if ( this.waitingForQuery ) return Array( 10 ).fill({ name: 'Loading', slug: 'loading', endpoint: '', linkClass: 'shimmer pointer-events-none' })
if (!this.hasSearchInputText) return this.initialList if (!this.hasSearchInputText) return this.initialList
return this.listingsResults return this.listingsResults
@ -452,16 +459,17 @@ export default {
behavior: 'smooth' behavior: 'smooth'
}) })
}, },
async queryResults (rawQuery) {
// Snap results scroll position back to top // Called on input and when a filter is toggled
// this.$refs['search-container'].scrollTop = 0 async queryResults ( rawQuery ) {
this.$emit('update:query', rawQuery)
// If our query is empty // If our query is empty
// then bail // then bail
if (rawQuery.length === 0) return if ( rawQuery.trim().length === 0 ) return
this.waitingForQuery = true
this.$emit('update:query', rawQuery)
// Declare that at least one query has been made // Declare that at least one query has been made
this.hasStartedAnyQuery = true this.hasStartedAnyQuery = true
@ -470,7 +478,11 @@ export default {
const storkQuery = await storkClient.lazyQuery( rawQuery ) const storkQuery = await storkClient.lazyQuery( rawQuery )
console.log('storkQuery', storkQuery) // If the query response is empty
// then return
if ( storkQuery === null ) {
return
}
this.listingsResults = storkQuery.results.map( result => { this.listingsResults = storkQuery.results.map( result => {
return { return {
@ -484,8 +496,18 @@ export default {
} }
}) })
console.log('storkQuery.results', storkQuery.results) // Switch from loading state and reveal the results
} this.waitingForQuery = false
// console.log('this.listingsResults', this.listingsResults)
},
handleSearchInput ( event ) {
const inputValue = event.target.value
this.scrollInputToTop()
this.queryResults( inputValue )
},
} }
} }
</script> </script>