ProfessionalUwU/stickerpicker
1
0
Fork 1
mirror of https://github.com/maunium/stickerpicker.git synced 2025-07-16 22:13:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add debouncing status display when searching for GIFs

Browse Source
This commit is contained in:
salixor
2024-07-02 02:23:41 +02:00
parent c2c9b8f8e2
commit c8938f7ade
6 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/search-box.js
View File

@ -14,12 +14,15 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import {html} from "../lib/htm/preact.js"
import {Spinner} from "./spinner.js";
export const SearchBox = ({onInput, onKeyUp, value, placeholder = 'Find stickers'}) => {
export const SearchBox = ({onInput, onKeyUp, value, loading = false, placeholder = 'Find stickers'}) => {
const component = html`
<div class="search-box">
<input type="text" placeholder=${placeholder} value=${value} onInput=${onInput} onKeyUp=${onKeyUp}/>
<span class="icon icon-search"/>
${!loading ?
html`<span class="icon icon-search"/>` :
html`<div class="search-spinner"><${Spinner} size=${14}/></div>`}
</div>
`
return component