Properly show loading state if there are still pending requests

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2020-09-15 17:16:34 +02:00
parent 283e66b300
commit 7991ed6cf3
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 9 additions and 1 deletions

View File

@ -35,6 +35,7 @@
<div class="unified-search__input-wrapper">
<form class="unified-search__form"
role="search"
:class="{'icon-loading-small': isLoading}"
@submit.prevent.stop="onInputEnter"
@reset.prevent.stop="onReset">
<!-- Search input -->
@ -48,7 +49,7 @@
@keypress.enter.prevent.stop="onInputEnter">
<!-- Reset search button -->
<input v-if="!!query"
<input v-if="!!query && !isLoading"
type="reset"
class="unified-search__form-reset icon-close"
:aria-label="t('core','Reset search')"
@ -646,6 +647,12 @@ $input-padding: 6px;
width: 100%;
margin: $margin;
// Loading spinner
&::after {
right: $input-padding;
left: auto;
}
&-input,
&-reset {
margin: $input-padding / 2;
@ -673,6 +680,7 @@ $input-padding: 6px;
}
// Ellipsis earlier if reset button is here
.icon-loading-small &,
&--with-reset {
padding-right: $input-height;
}