Sort Children: Show loading state on Sort button (closes #22651)

[AndyButland]

Description

The "Sort Children" modal currently gives editors no visual feedback while the sort request is in flight. For parents with many children the await can take many seconds, which led editors to assume the action was hung and cancel it.

With this update, the "Sort" uui-button now reflects the in-flight state via state="waiting" (and transitions to success/failed based on the repository result), matching the pattern already used in document-schedule-modal.element.ts.

Fixes #22651

Testing

• Right-click a parent with several children.
• Reorder at least one a child and click "Sort".
• Verify the Sort button shows a waiting spinner immediately and remains in that state until the request completes and the dialog closes.

[claude]

Claude finished @AndyButland's task in 2m 7s —— View job

---

PR Review

Target: origin/v17/dev · Based on commit: 3b08b96f

Adds UUIButtonState tracking to the sort-children modal so editors see a spinner while the sort request is in-flight, a success tick on completion, and a red failed indicator on error — matching the pattern already used in document-schedule-modal.element.ts.

• Other changes: Sort button now transitions through waiting → success → (modal closes) or waiting → failed states, giving visual feedback on long-running sort operations.

---

Suggestions

• sort-children-of-modal.element.ts:141: #onSubmit has no re-entrancy guard. While UUI buttons in state="waiting" visually show a spinner, the click handler is still callable (the element isn't DOM-disabled). A rapid double-click could launch two concurrent sortChildrenOf calls. Adding a two-line guard at the top of the method would prevent this:

  async #onSubmit(event: PointerEvent) {
      if (this._submitButtonState === 'waiting') return;
      event?.stopPropagation();
      ...

  Fix this →

---

Approved with Suggestions

Good to go. The pattern is consistent with document-schedule-modal.element.ts, the state machine is correct (waiting → success/failed), and the property binding .state=${...} is the right approach for a typed UUI property. The re-entrancy guard is worth adding before merge but isn't a blocker.

Labels applied: area/frontend, category/ux, category/ui

[Copilot]

Pull request overview

Improves the Sort Children modal UX by reflecting long-running sort operations directly on the Sort button, aligning with existing backoffice button-state patterns.

Changes:

• Introduces a _submitButtonState Lit state to drive the <uui-button> visual state.
• Sets Sort button state to waiting during the async sort call, and to success/failed based on the repository result.
• Binds the Sort button’s .state property to _submitButtonState.

[leekelleher]

Cheery picked for v17.5.0 in commit 35d726a; and v18.0.0 in commit 50727c4.