Skip to content

Commit

Permalink
[ui] Debounce organization selector API calls
Browse files Browse the repository at this point in the history 
Limits the API calls made by the OrganizationSelector
component by only executing them after 500 milliseconds
after the last key press.
It also adds a progress bar to the input to show when
the list of organizations is loading.

Signed-off-by: Eva Millán <[email protected]>
  • Loading branch information
@evamillan
evamillan committed Dec 13, 2023
1 parent 9aa203a commit 742d582
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 28 deletions.
16 changes: 14 additions & 2 deletions ui/src/components/OrganizationSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
:items="organizations"
:search-input.sync="search"
:label="label"
:loading="isLoading"
item-text="name"
item-value="name"
:no-data-text="`No matches for &quot;${search}&quot;`"
:hide-no-data="!search"
:hide-no-data="!search || isLoading"
cache-items
clearable
dense
outlined
Expand All @@ -33,6 +35,7 @@ export default {
inputValue: this.value,
organizations: [],
search: this.value,
isLoading: false,
};
},
props: {
Expand All @@ -55,11 +58,19 @@ export default {
},
},
methods: {
debounceSearch(searchValue) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.getSelectorItems(searchValue);
}, 500);
},
async getSelectorItems(value) {
const filters = value ? { term: value } : {};
const response = await this.fetchOrganizations(1, 10, filters);
if (response) {
this.organizations = response.entities;
this.isLoading = false;
}
},
async createOrganization() {
Expand Down Expand Up @@ -89,7 +100,8 @@ export default {
watch: {
search(value) {
if (value && value.length > 2) {
this.getSelectorItems(value);
this.isLoading = true;
this.debounceSearch(value);
}
},
value() {
Expand Down
52 changes: 26 additions & 26 deletions ui/tests/unit/__snapshots__/storybook.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10563,13 +10563,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
>
<label
class="v-label theme--light"
for="input-1692"
for="input-1694"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1692"
id="input-1694"
type="text"
/>
</div>
Expand Down Expand Up @@ -10729,13 +10729,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
>
<label
class="v-label v-label--active theme--light"
for="input-1704"
for="input-1706"
style="left: 0px; position: absolute;"
>
Items per page
</label>
<input
id="input-1704"
id="input-1706"
max="0"
min="1"
type="number"
Expand Down Expand Up @@ -10854,13 +10854,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
>
<label
class="v-label theme--light"
for="input-1745"
for="input-1747"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1745"
id="input-1747"
type="text"
/>
</div>
Expand Down Expand Up @@ -11020,13 +11020,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
>
<label
class="v-label v-label--active theme--light"
for="input-1757"
for="input-1759"
style="left: 0px; position: absolute;"
>
Items per page
</label>
<input
id="input-1757"
id="input-1759"
max="0"
min="1"
type="number"
Expand Down Expand Up @@ -11400,13 +11400,13 @@ exports[`Storyshots Search Default 1`] = `
>
<label
class="v-label theme--light"
for="input-1848"
for="input-1850"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1848"
id="input-1850"
type="text"
/>
</div>
Expand Down Expand Up @@ -11527,13 +11527,13 @@ exports[`Storyshots Search Filter Selector 1`] = `
>
<label
class="v-label theme--light"
for="input-1857"
for="input-1859"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1857"
id="input-1859"
type="text"
/>
</div>
Expand Down Expand Up @@ -11624,13 +11624,13 @@ exports[`Storyshots Search Order Selector 1`] = `
>
<label
class="v-label theme--light"
for="input-1869"
for="input-1871"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1869"
id="input-1871"
type="text"
/>
</div>
Expand Down Expand Up @@ -11693,7 +11693,7 @@ exports[`Storyshots Search Order Selector 1`] = `
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="list-1873"
aria-owns="list-1875"
class="v-input__slot"
role="button"
>
Expand All @@ -11713,7 +11713,7 @@ exports[`Storyshots Search Order Selector 1`] = `
>
<label
class="v-label theme--light"
for="input-1873"
for="input-1875"
style="left: 0px; position: absolute;"
>
Order by
Expand All @@ -11724,7 +11724,7 @@ exports[`Storyshots Search Order Selector 1`] = `
<input
aria-readonly="false"
autocomplete="off"
id="input-1873"
id="input-1875"
readonly="readonly"
type="text"
/>
Expand Down Expand Up @@ -12660,7 +12660,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
/>
<input
aria-checked="false"
id="input-2019"
id="input-2021"
role="checkbox"
type="checkbox"
value=""
Expand All @@ -12671,7 +12671,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
</div>
<label
class="v-label theme--light"
for="input-2019"
for="input-2021"
style="left: 0px; position: relative;"
>
Select all
Expand Down Expand Up @@ -12759,13 +12759,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
>
<label
class="v-label theme--light"
for="input-2024"
for="input-2026"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-2024"
id="input-2026"
type="text"
/>
</div>
Expand Down Expand Up @@ -12828,7 +12828,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="list-2031"
aria-owns="list-2033"
class="v-input__slot"
role="button"
>
Expand All @@ -12848,7 +12848,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
>
<label
class="v-label theme--light"
for="input-2031"
for="input-2033"
style="left: 0px; position: absolute;"
>
Order by
Expand All @@ -12859,7 +12859,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
<input
aria-readonly="false"
autocomplete="off"
id="input-2031"
id="input-2033"
readonly="readonly"
type="text"
/>
Expand Down Expand Up @@ -13086,13 +13086,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
>
<label
class="v-label v-label--active theme--light"
for="input-2053"
for="input-2055"
style="left: 0px; position: absolute;"
>
Items per page
</label>
<input
id="input-2053"
id="input-2055"
max="0"
min="1"
type="number"
Expand Down

0 comments on commit 742d582

Please sign in to comment.