From 8825cccef02990b09c96b552dab78c5c7bbc4b6d Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Sep 2024 17:46:20 +0100
Subject: [PATCH] Styled loader for Tiptap input component

---
 .../components/input-tiptap/input-tiptap.element.ts    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
index 631d04fc9e..786045550d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
@@ -91,7 +91,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 		if (!element) return;
 
 		const dimensions = this.configuration?.getValueByAlias<{ width?: number; height?: number }>('dimensions');
-		console.log(this.configuration, dimensions);
 		if (dimensions?.width) this.setAttribute('style', `max-width: ${dimensions.width}px;`);
 		if (dimensions?.height) element.setAttribute('style', `max-height: ${dimensions.height}px;`);
 
@@ -120,7 +119,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 		return html`
 			${when(
 				!this._editor && !this._extensions?.length,
-				() => html`<uui-loader></uui-loader>`,
+				() => html`<div id="loader"><uui-loader></uui-loader></div>`,
 				() => html`
 					<umb-tiptap-fixed-menu
 						.toolbar=${this._toolbar}
@@ -140,6 +139,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				position: relative;
 				z-index: 0;
 			}
+
 			:host([readonly]) {
 				pointer-events: none;
 
@@ -148,6 +148,12 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				}
 			}
 
+			#loader {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
 			.tiptap {
 				height: 100%;
 				width: 100%;