Added search delay and prioritize anime search

This commit is contained in:
Eduard Urbach 2018-03-29 12:46:40 +02:00
parent ee1460aef7
commit df9a05ba2c

View File

@ -1,4 +1,5 @@
import { AnimeNotifier } from "../AnimeNotifier"
import { delay } from "../Utils"
// Search page reference
var emptySearchHTML = ""
@ -24,6 +25,9 @@ var soundtrackSearchResults: HTMLElement
var userSearchResults: HTMLElement
var companySearchResults: HTMLElement
// Delay before a request is sent
const searchDelay = 150
// Fetch options
const fetchOptions: RequestInit = {
credentials: "same-origin"
@ -63,6 +67,14 @@ export async function search(arn: AnimeNotifier, search: HTMLInputElement, e: Ke
// Unmount mountables to improve visual responsiveness on key press
arn.unmountMountables()
// Delay
await delay(searchDelay)
if(term !== search.value.trim()) {
arn.mountMountables()
return
}
// Show loading spinner
arn.loading(true)
@ -110,25 +122,27 @@ export async function search(arn: AnimeNotifier, search: HTMLInputElement, e: Ke
.then(showResponseInElement(arn, url, "anime", animeSearchResults))
.catch(console.error)
fetch("/_/character-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "character", characterSearchResults))
.catch(console.error)
arn.requestIdleCallback(() => {
fetch("/_/character-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "character", characterSearchResults))
.catch(console.error)
fetch("/_/forum-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "forum", forumSearchResults))
.catch(console.error)
fetch("/_/forum-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "forum", forumSearchResults))
.catch(console.error)
fetch("/_/soundtrack-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "soundtrack", soundtrackSearchResults))
.catch(console.error)
fetch("/_/soundtrack-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "soundtrack", soundtrackSearchResults))
.catch(console.error)
fetch("/_/user-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "user", userSearchResults))
.catch(console.error)
fetch("/_/user-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "user", userSearchResults))
.catch(console.error)
fetch("/_/company-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "company", companySearchResults))
.catch(console.error)
fetch("/_/company-search/" + term, fetchOptions)
.then(showResponseInElement(arn, url, "company", companySearchResults))
.catch(console.error)
})
} catch(err) {
console.error(err)
} finally {
@ -137,7 +151,9 @@ export async function search(arn: AnimeNotifier, search: HTMLInputElement, e: Ke
}
function showResponseInElement(arn: AnimeNotifier, url: string, typeName: string, element: HTMLElement) {
return async response => {
return async (response: Response) => {
console.log(response.status, response.headers.get("ETag"))
let html = await response.text()
if(arn.app.currentPath !== url) {