Stylesheets workspace: refactored to remove loadCodeEditor function

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts

@@ -10,8 +10,7 @@ import {
 	type UmbRoutableWorkspaceContext,
 } from '@umbraco-cms/backoffice/workspace';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import {
 	UmbRequestReloadChildrenOfEntityEvent,
@@ -36,12 +35,8 @@ export class UmbStylesheetWorkspaceContext
 	readonly name = this.#data.asObservablePart((data) => data?.name);
 	readonly content = this.#data.asObservablePart((data) => data?.content);
 
-	#isCodeEditorReady = new UmbBooleanState(false);
-	readonly isCodeEditorReady = this.#isCodeEditorReady.asObservable();
-
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_STYLESHEET_WORKSPACE_ALIAS);
-		this.#loadCodeEditor();
 
 		this.routes.setRoutes([
 			{
@@ -76,15 +71,6 @@ export class UmbStylesheetWorkspaceContext
 		this.#data.setValue(undefined);
 	}
 
-	async #loadCodeEditor() {
-		try {
-			await loadCodeEditor();
-			this.#isCodeEditorReady.setValue(true);
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
 	getEntityType(): string {
 		return UMB_STYLESHEET_ENTITY_TYPE;
 	}

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-code-editor-workspace-view.element.ts

@@ -5,14 +5,13 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
+import '@umbraco-cms/backoffice/code-editor';
+
 @customElement('umb-stylesheet-code-editor-workspace-view')
 export class UmbStylesheetCodeEditorWorkspaceViewElement extends UmbLitElement {
 	@state()
 	private _content?: string | null = '';
 
-	@state()
-	private _ready?: boolean = false;
-
 	#stylesheetWorkspaceContext?: UmbStylesheetWorkspaceContext;
 
 	constructor() {
@@ -24,10 +23,6 @@ export class UmbStylesheetCodeEditorWorkspaceViewElement extends UmbLitElement {
 			this.observe(this.#stylesheetWorkspaceContext.content, (content) => {
 				this._content = content;
 			});
-
-			this.observe(this.#stylesheetWorkspaceContext.isCodeEditorReady, (isReady) => {
-				this._ready = isReady;
-			});
 		});
 	}
 
@@ -37,25 +32,23 @@ export class UmbStylesheetCodeEditorWorkspaceViewElement extends UmbLitElement {
 		this.#stylesheetWorkspaceContext?.setContent(value);
 	}
 
-	#renderCodeEditor() {
-		return html`<umb-code-editor
-			language="css"
-			id="content"
-			.code=${this._content ?? ''}
-			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
-	}
-
 	override render() {
 		return html` <uui-box>
 			<div slot="header" id="code-editor-menu-container"></div>
-			${this._ready
-				? this.#renderCodeEditor()
-				: html`<div id="loader-container">
-						<uui-loader></uui-loader>
-					</div>`}
+			${this.#renderCodeEditor()}
 		</uui-box>`;
 	}
 
+	#renderCodeEditor() {
+		return html`
+			<umb-code-editor
+				id="content"
+				language="css"
+				.code=${this._content ?? ''}
+				@input=${this.#onCodeEditorInput}></umb-code-editor>
+		`;
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
@@ -64,12 +57,6 @@ export class UmbStylesheetCodeEditorWorkspaceViewElement extends UmbLitElement {
 				width: 100%;
 			}
 
-			#loader-container {
-				display: grid;
-				place-items: center;
-				min-height: calc(100dvh - 300px);
-			}
-
 			umb-code-editor {
 				--editor-height: calc(100dvh - 300px);
 			}