Fix account note textarea being interactable before the relationship gets fetched (#34932)

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>
     );
   }

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;