From 53d2e44e14c12f5e8d00ebe60c94ddc90c27c7f6 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Wed, 21 Jun 2023 12:45:37 +0800
Subject: [PATCH] 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.
---
 .../components/sidebar/tags-form-modal.hbs    | 64 ++++++++++---------
 .../app/components/sidebar/tags-form-modal.js |  3 +
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs
index 50018d2d466..cdaaf57c045 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs
@@ -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>
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js
index 258c7f11b3a..ee52a423f45 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js
@@ -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);