From 375add0c83651771b08c5c450353f1b7f313bb04 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 5 Jun 2025 10:49:26 +0200
Subject: [PATCH] Fix account note textarea being interactable before the
 relationship gets fetched (#34932)

---
 .../account/components/account_note.jsx       | 30 ++++++++++++-------
 .../styles/mastodon/components.scss           | 14 +++++++++
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/app/javascript/mastodon/features/account/components/account_note.jsx b/app/javascript/mastodon/features/account/components/account_note.jsx
index df7312eafc..855a1f4fc8 100644
--- a/app/javascript/mastodon/features/account/components/account_note.jsx
+++ b/app/javascript/mastodon/features/account/components/account_note.jsx
@@ -8,6 +8,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import Textarea from 'react-textarea-autosize';
 
+import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+
 const messages = defineMessages({
   placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
 });
@@ -153,17 +155,23 @@ class AccountNote extends ImmutablePureComponent {
           <FormattedMessage id='account.account_note_header' defaultMessage='Personal note' /> <InlineAlert show={saved} />
         </label>
 
-        <Textarea
-          id={`account-note-${accountId}`}
-          className='account__header__account-note__content'
-          disabled={this.props.value === null || value === null}
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={value || ''}
-          onChange={this.handleChange}
-          onKeyDown={this.handleKeyDown}
-          onBlur={this.handleBlur}
-          ref={this.setTextareaRef}
-        />
+        {this.props.value === undefined ? (
+          <div className='account__header__account-note__loading-indicator-wrapper'>
+            <LoadingIndicator />
+          </div>
+        ) : (
+          <Textarea
+            id={`account-note-${accountId}`}
+            className='account__header__account-note__content'
+            disabled={value === null}
+            placeholder={intl.formatMessage(messages.placeholder)}
+            value={value || ''}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            onBlur={this.handleBlur}
+            ref={this.setTextareaRef}
+          />
+        )}
       </div>
     );
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index de0478c543..0122b81b8b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8203,6 +8203,20 @@ noscript {
     font-weight: 400;
     margin-bottom: 10px;
 
+    &__loading-indicator-wrapper {
+      position: relative;
+      height: 37px;
+
+      .loading-indicator {
+        left: 10px;
+      }
+
+      .circular-progress {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
     label {
       display: block;
       font-size: 12px;