ProfessionalUwU/stickerpicker
1
0
Fork 1
mirror of https://github.com/maunium/stickerpicker.git synced 2025-01-31 04:15:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add loading display when searching for GIFs

Browse Source
This commit is contained in:
salixor 2024-07-01 21:04:15 +02:00
parent 333567f481
commit c8f885ab5b
No known key found for this signature in database
GPG Key ID: C822C02403A217B9
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/giphy.js
View File

@ -1,5 +1,6 @@
import {Component, html} from "../lib/htm/preact.js";
import * as widgetAPI from "./widget-api.js";
import {Spinner} from "./spinner.js";
import {SearchBox} from "./search-box.js";
const GIPHY_SEARCH_DEBOUNCE = 1000
@ -34,13 +35,14 @@ export class GiphySearchTab extends Component {
async makeGifSearchRequest() {
try {
this.setState({gifs: [], loading: true})
const resp = await fetch(`https://api.giphy.com/v1/gifs/search?q=${this.state.searchTerm}&api_key=${GIPHY_API_KEY}`)
// TODO handle error responses properly?
const data = await resp.json()
if (data.data.length === 0) {
this.setState({gifs: [], error: "No results"})
this.setState({gifs: [], error: "No results", loading: false})
} else {
this.setState({gifs: data.data, error: null})
this.setState({gifs: data.data, error: null, loading: false})
}
} catch (error) {
this.setState({error})
@ -82,11 +84,13 @@ export class GiphySearchTab extends Component {
}
render() {
// TODO display loading state?
return html`
<${SearchBox} onInput=${this.updateGifSearchQuery} onKeyUp=${this.searchKeyUp} value=${this.state.searchTerm} placeholder="Find GIFs"/>
<div class="pack-list">
<section class="stickerpack" id="pack-giphy">
${this.state.loading ?
html`<${Spinner} size=${80} green/>` :
html`
<div class="error">
${this.state.error}
</div>
@ -100,6 +104,7 @@ export class GiphySearchTab extends Component {
<div class="footer powered-by-giphy">
<img src="./res/powered-by-giphy.png" alt="Powered by GIPHY"/>
</div>
`}
</section>
</div>
`