From 33ea3599c2e22b413826459d2d0bd1086ef36c49 Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Tue, 14 Jan 2025 11:37:36 +0400
Subject: [PATCH] FIX: prevent multiple requests when clicking drafts trigger
 (#30736)

Adds a loading state to prevent multiple requests when clicking the
drafts menu button.

We are also making a very slight adjustment to button spacing (needed
for both desktop and mobile).
---
 .../discourse/app/components/topic-drafts-dropdown.gjs      | 6 ++++++
 app/assets/stylesheets/common/base/_topic-list.scss         | 2 +-
 .../stylesheets/common/components/drafts-dropdown-menu.scss | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs b/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs
index 05f2e2c487c..2f701f898fe 100644
--- a/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs
@@ -17,6 +17,7 @@ export default class TopicDraftsDropdown extends Component {
   @service composer;
 
   @tracked drafts = [];
+  @tracked loading = false;
 
   get draftCount() {
     return this.currentUser.draft_count;
@@ -41,6 +42,8 @@ export default class TopicDraftsDropdown extends Component {
 
   @action
   async onShowMenu() {
+    this.loading = true;
+
     try {
       const draftsStream = this.currentUser.userDraftsStream;
       draftsStream.reset();
@@ -50,6 +53,8 @@ export default class TopicDraftsDropdown extends Component {
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error("Failed to fetch drafts with error:", error);
+    } finally {
+      this.loading = false;
     }
   }
 
@@ -77,6 +82,7 @@ export default class TopicDraftsDropdown extends Component {
       @onShow={{this.onShowMenu}}
       @onRegisterApi={{this.onRegisterApi}}
       @modalForMobile={{true}}
+      @disabled={{this.loading}}
       class="btn-small"
     >
       <:content>
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index a3a35b6861f..4c49eba16b9 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -59,7 +59,7 @@
   > * {
     white-space: nowrap;
     &:not(:last-child) {
-      margin-right: 0.5em;
+      margin-right: 0.4em;
     }
   }
   .select-kit-header {
diff --git a/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss b/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss
index 9be7bda9d33..c35c331012d 100644
--- a/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss
+++ b/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss
@@ -1,7 +1,7 @@
 // Styles for the drafts dropdown menu
 
 .topic-drafts-menu-trigger {
-  margin-left: -0.4em;
+  margin-left: -0.3em;
 }
 
 .topic-drafts-menu-content {