Performance: Load stylesheets parallel to extensions in Tiptap

[nielslyngsoe]

It should not be necessary to await loading of the stylesheet before loading TipTap Extensions. So this makes them load in parallel.

---

This item has been added to our backlog AB#68798

[claude]

Claude finished @nielslyngsoe's task in 5m 56s —— View job

---

PR Review

Target: origin/v17/dev · Based on commit: f46a66c

Refactors umb-input-tiptap to load stylesheets concurrently with extensions, and consolidates all stylesheet-related logic into #loadStylesheetPath() (previously split across #loadStylesheetPath() and #loadEditor()).

Important

• input-tiptap.element.ts:146: _stylesheets is mutated via .add() — the object reference stays the same, so Lit's @state() change detection (===) never schedules a re-render for this mutation. If #loadStylesheetPath() completes after _extensionStyles is set and the first render has already run, configured stylesheets silently never appear in the shadow DOM. In practice the context observable resolves faster than extension loading, but the code is fragile and the decorator implies reactivity it doesn't deliver for in-place Set mutations. Fix: replace the reference in one assignment — collect hrefs into an array then do this._stylesheets = new Set([...this._stylesheets, ...hrefs]);.

---

Approved with Suggestions for improvement

The parallelisation is sound and the consolidation of stylesheet logic is a clean improvement. Please address the @state() + Set mutation to ensure correctness if loading order ever changes.

---

Labels applied: area/frontend, category/performance

[claude]

Reviewed — see inline comment below and summary in the Claude comment.

[Copilot]

Pull request overview

Refactors <umb-input-tiptap> so that resolving the stylesheet root path and building the configured stylesheet <link> list runs in parallel with Tiptap extension loading, rather than blocking it.

Changes:

• Removes the await on #loadStylesheetPath() in firstUpdated() so it executes concurrently with #loadExtensions()/#loadEditor().
• Moves the configured-stylesheets URL building from #loadEditor() into #loadStylesheetPath() (after the root path observable resolves).
• Promotes the #stylesheets private field to a reactive @state() _stylesheets and updates #renderStyles() to read it.