Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Display spinner while loading tags for edit nav menu tags modal (#22217) 

What does this change do?

This change adds a loading spinner to the edit navigation menu tags
modal when the request to fetch all the tags for a site is in progress.
This mainly to improve the user experience such that we indicate that
something is being loaded instead of just displaying a large empty
space.

What are there no tests for this change?

This change is kind of hard to test and since it is mostly a UX change,
we can live with such regressions in the future. It is still bad to
regress UX wise but impact of such a regression is likely to be low.
This commit is contained in:
Alan Guo Xiang Tan 2023-06-21 12:45:37 +08:00 committed by GitHub
parent 722180edba
commit 53d2e44e14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs
View File

@ -15,37 +15,41 @@
/>
</div>
{{#if (gt this.filteredTags.length 0)}}
{{#each this.filteredTags as |tag|}}
<div class="sidebar-tags-form__tag" data-tag-name={{tag.name}}>
<Input
id={{concat "sidebar-tags-form__input--" tag.name}}
class="sidebar-tags-form__input"
@type="checkbox"
@checked={{includes this.selectedTags tag.name}}
{{on "click" (action "toggleTag" tag.name)}}
/>
<label
class="sidebar-tags-form__tag-label"
for={{concat "sidebar-tags-form__input--" tag.name}}
>
<p>
<span class="sidebar-tags-form__tag-label-name">
{{tag.name}}
</span>
<span class="sidebar-tags-form__tag-label-count">
({{tag.count}})
</span>
</p>
</label>
</div>
{{/each}}
{{#if this.tagsLoading}}
<div class="spinner"></div>
{{else}}
<div class="sidebar-tags-form__no-tags">
{{i18n "sidebar.tags_form_modal.no_tags"}}
</div>
{{#if (gt this.filteredTags.length 0)}}
{{#each this.filteredTags as |tag|}}
<div class="sidebar-tags-form__tag" data-tag-name={{tag.name}}>
<Input
id={{concat "sidebar-tags-form__input--" tag.name}}
class="sidebar-tags-form__input"
@type="checkbox"
@checked={{includes this.selectedTags tag.name}}
{{on "click" (action "toggleTag" tag.name)}}
/>
<label
class="sidebar-tags-form__tag-label"
for={{concat "sidebar-tags-form__input--" tag.name}}
>
<p>
<span class="sidebar-tags-form__tag-label-name">
{{tag.name}}
</span>
<span class="sidebar-tags-form__tag-label-count">
({{tag.count}})
</span>
</p>
</label>
</div>
{{/each}}
{{else}}
<div class="sidebar-tags-form__no-tags">
{{i18n "sidebar.tags_form_modal.no_tags"}}
</div>
{{/if}}
{{/if}}
</form>
</DModalBody>

3
app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js
View File

@ -13,6 +13,7 @@ export default class extends Component {
@tracked filter = "";
@tracked tags = [];
@tracked tagsLoading = true;
@tracked selectedTags = [...this.currentUser.sidebarTagNames];
constructor() {
@ -29,6 +30,8 @@ export default class extends Component {
this.tags = tags.content.sort((a, b) => {
return a.name.localeCompare(b.name);
});
this.tagsLoading = false;
})
.catch((error) => {
popupAjaxError(error);