mirrors/stickerpicker
mirrors/stickerpicker
1
0
Fork 1
mirror of https://github.com/maunium/stickerpicker synced 2024-12-21 06:30:43 +00:00
Code 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

35
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,24 +84,27 @@ 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">
<div class="error">
${this.state.error}
</div>
<div class="sticker-list">
${this.state.gifs.map((gif) => html`
<div class="sticker" onClick=${() => this.handleGifClick(gif)} data-gif-id=${gif.id}>
<img src=${gif.images.fixed_height.url} alt=${gif.title} class="visible" data=/>
${this.state.loading ?
html`<${Spinner} size=${80} green/>` :
html`
<div class="error">
${this.state.error}
</div>
`)}
</div>
<div class="footer powered-by-giphy">
<img src="./res/powered-by-giphy.png" alt="Powered by GIPHY"/>
</div>
<div class="sticker-list">
${this.state.gifs.map((gif) => html`
<div class="sticker" onClick=${() => this.handleGifClick(gif)} data-gif-id=${gif.id}>
<img src=${gif.images.fixed_height.url} alt=${gif.title} class="visible" data=/>
</div>
`)}
</div>
<div class="footer powered-by-giphy">
<img src="./res/powered-by-giphy.png" alt="Powered by GIPHY"/>
</div>
`}
</section>
</div>
`