diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
index eac68b2669..4543be8268 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
@@ -1,22 +1,17 @@
 import { css, html, ifDefined, customElement, query } from '@umbraco-cms/backoffice/external/lit';
-import { loadCodeEditor, type UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
-import type { UmbCodeEditorModalData, UmbCodeEditorModalValue } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
+import type { UmbCodeEditorModalData, UmbCodeEditorModalValue } from '@umbraco-cms/backoffice/modal';
 
-@customElement('umb-code-editor-modal')
+import '@umbraco-cms/backoffice/code-editor';
+
+const elementName = 'umb-code-editor-modal';
+
+@customElement(elementName)
 export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalValue> {
-	#isCodeEditorReady = new UmbBooleanState(false);
-	isCodeEditorReady = this.#isCodeEditorReady.asObservable();
-
 	@query('umb-code-editor')
 	_codeEditor?: UmbCodeEditorElement;
 
-	constructor() {
-		super();
-		this.#loadCodeEditor();
-	}
-
 	#handleConfirm() {
 		this.value = { content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' };
 		this.modalContext?.submit();
@@ -25,34 +20,15 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 	#handleCancel() {
 		this.modalContext?.reject();
 	}
-
-	async #loadCodeEditor() {
-		try {
-			await loadCodeEditor();
-			this.#isCodeEditorReady.setValue(true);
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
-	#renderCodeEditor() {
-		return html`<umb-code-editor
-			language=${ifDefined(this.data?.language)}
-			.code=${this.data?.content ?? ''}></umb-code-editor>`;
-	}
-
-	#renderLoading() {
-		return html`<div id="loader-container">
-			<uui-loader></uui-loader>
-		</div>`;
-	}
-
 	override render() {
 		return html`
 			<umb-body-layout .headline=${this.data?.headline ?? 'Code Editor'}>
-				<div id="editor-box">${this.isCodeEditorReady ? this.#renderCodeEditor() : this.#renderLoading()}</div>
+				<div id="editor-box">${this.#renderCodeEditor()}</div>
 				<div slot="actions">
-					<uui-button id="cancel" label="Cancel" @click="${this.#handleCancel}">Cancel</uui-button>
+					<uui-button
+						id="cancel"
+						label=${this.localize.term('general_cancel')}
+						@click=${this.#handleCancel}></uui-button>
 					<uui-button
 						id="confirm"
 						color="${this.data?.color || 'positive'}"
@@ -64,6 +40,12 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 		`;
 	}
 
+	#renderCodeEditor() {
+		return html`
+			<umb-code-editor language=${ifDefined(this.data?.language)} .code=${this.data?.content ?? ''}></umb-code-editor>
+		`;
+	}
+
 	static override styles = [
 		css`
 			#editor-box {
@@ -83,6 +65,6 @@ export default UmbCodeEditorModalElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-code-editor-modal': UmbCodeEditorModalElement;
+		[elementName]: UmbCodeEditorModalElement;
 	}
 }