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

35
web/src/giphy.js
View File

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