web/notify.moe
Code Issues Pull Requests Activity

Added search delay and prioritize anime search

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-29 12:46:40 +02:00
parent ee1460aef7
commit df9a05ba2c
1 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
scripts/Actions/Search.ts
View File

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