Loader bar: Implement loader for Content Workspaces

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor.element.ts

@@ -33,6 +33,9 @@
   */
 	#viewContext?: typeof UMB_VIEW_CONTEXT.TYPE;
 
+	@state()
+	private _loaded = false;
+
 	@state()
 	private _hasRootGroups = false;
 
@@ -84,6 +87,13 @@
 			this.#structureManager = workspaceContext?.structure;
 			this._tabsStructureHelper.setStructureManager(workspaceContext?.structure);
 			this.#observeRootGroups();
+			this.observe(
+				this.#structureManager?.contentTypeLoaded,
+				(loaded) => {
+					this._loaded = loaded ?? false;
+				},
+				'observeContentTypeLoaded',
+			);
 		});
 	}
 
@@ -197,7 +207,9 @@
 	}
 
 	override render() {
-		if (!this._routes || !this._tabs) return;
+		if (!this._loaded || !this._routes || this._routes.length === 0 || !this._tabs) {
+			return html`<umb-view-loader></umb-view-loader>`;
+		}
 		return html`
 			<umb-body-layout header-fit-height>
 				${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -29,3 +29,4 @@ export * from './ref-item/index.js';
 export * from './split-panel/index.js';
 export * from './stack/index.js';
 export * from './table/index.js';
+export * from './view-loader/view-loader.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/view-loader/view-loader.element.ts

@@ -0,0 +1,30 @@
+import { LitElement, css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-view-loader')
+export class UmbViewLoaderElement extends LitElement {
+	// Note just LitElement, not Umbraco Element.
+
+	override render() {
+		return html` <uui-loader></uui-loader>`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: flex;
+				width: 100%;
+				justify-content: center;
+				height: 100%;
+				align-items: center;
+				opacity: 0;
+				animation: fadeIn 240ms 240ms forwards;
+			}
+
+			@keyframes fadeIn {
+				100% {
+					opacity: 100%;
+				}
+			}
+		`,
+	];
+}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view.element.ts

@@ -26,6 +26,9 @@ import './workspace-split-view-variant-selector.element.js';
  */
 @customElement('umb-workspace-split-view')
 export class UmbWorkspaceSplitViewElement extends UmbLitElement {
+	@property({ type: Boolean })
+	public loading = false;
+
 	@property({ type: Boolean })
 	displayNavigation = false;
 
@@ -52,7 +55,7 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
 	@state()
 	private _variantId?: UmbVariantId;
 
-	splitViewContext = new UmbWorkspaceSplitViewContext(this);
+	readonly splitViewContext = new UmbWorkspaceSplitViewContext(this);
 
 	#onVariantSelectorSlotChanged(e: Event) {
 		this._variantSelectorSlotHasContent = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
@@ -81,6 +84,7 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
 	override render() {
 		return html`
 			<umb-workspace-editor
+				.loading=${this.loading}
 				back-path=${ifDefined(this.backPath)}
 				.hideNavigation=${!this.displayNavigation}
 				.variantId=${this._variantId}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts

@@ -1,5 +1,5 @@
 import type { ManifestWorkspace } from './extensions/types.js';
-import { nothing, customElement, property, type PropertyValueMap, state } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, property, type PropertyValueMap, state, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import {
 	UmbExtensionsApiInitializer,
@@ -62,7 +62,7 @@ export class UmbWorkspaceElement extends UmbLitElement {
 	}
 
 	override render() {
-		return this._component ?? nothing;
+		return this._component ?? html`<umb-view-loader></umb-view-loader>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts

@@ -25,6 +25,9 @@
 	@state()
 	private _routes?: Array<UmbRoute>;
 
+	@state()
+	private _loading?: boolean = true;
+
 	constructor() {
 		super();
 
@@ -55,11 +58,19 @@
 				},
 				'_observeForbidden',
 			);
+
+			this.observe(
+				this.#workspaceContext?.loading.isOn,
+				(loading) => {
+					this._loading = loading ?? false;
+				},
+				'_observeLoading',
+			);
 		});
 	}
 
 	#generateRoutes() {
-		if (!this.#variants || !this.#appCulture) {
+		if (!this.#variants || this.#variants.length === 0 || !this.#appCulture) {
 			this._routes = [];
 			return;
 		}
@@ -145,9 +156,9 @@
 	};
 
 	override render() {
-		return this._routes
+		return !this._loading && this._routes
 			? html`<umb-router-slot .routes=${this._routes} @init=${this._gotWorkspaceRoute}></umb-router-slot>`
-			: '';
+			: html`<umb-view-loader></umb-view-loader>`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-split-view.element.ts

@@ -21,6 +21,9 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 	@state()
 	private _overrides?: Array<UmbDeepPartialObject<ManifestWorkspaceView>>;
 
+	@state()
+	private _loading = true;
+
 	constructor() {
 		super();
 
@@ -29,6 +32,7 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 			this._workspaceContext = context;
 			this.#observeActiveVariantInfo();
 			this.#observeIcon();
+			this.#observeLoading();
 			this.#observeCollectionOverrides();
 		});
 	}
@@ -44,15 +48,33 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 	}
 
 	#observeIcon() {
-		this.observe(this._workspaceContext?.contentTypeIcon, (icon) => {
-			this._icon = icon ?? undefined;
-		});
+		this.observe(
+			this._workspaceContext?.contentTypeIcon,
+			(icon) => {
+				this._icon = icon ?? undefined;
+			},
+			'observeIcon',
+		);
+	}
+
+	#observeLoading() {
+		this.observe(
+			this._workspaceContext?.loading.isOn,
+			(loading) => {
+				this._loading = loading ?? false;
+			},
+			'observeIcon',
+		);
 	}
 
 	#observeCollectionOverrides() {
-		this.observe(this._workspaceContext?.collection.manifestOverrides, (overrides) => {
-			this._overrides = overrides ? [overrides] : undefined;
-		});
+		this.observe(
+			this._workspaceContext?.collection.manifestOverrides,
+			(overrides) => {
+				this._overrides = overrides ? [overrides] : undefined;
+			},
+			'observeCollectionOverrides',
+		);
 	}
 
 	override render() {
@@ -64,6 +86,7 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 								view.index + '_' + (view.culture ?? '') + '_' + (view.segment ?? '') + '_' + this._variants!.length,
 							(view) => html`
 								<umb-workspace-split-view
+									.loading=${this._loading}
 									.displayNavigation=${view.index === this._variants!.length - 1}
 									.overrides=${this._overrides}
 									.splitViewIndex=${view.index}>
@@ -96,10 +119,6 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 				width: 100%;
 				height: calc(100% - var(--umb-footer-layout-height));
 			}
-
-			#breadcrumbs {
-				margin: 0 var(--uui-size-layout-1);
-			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts

@@ -127,20 +127,24 @@
 			this.#publishingContext = context;
 		});
 
-		this.observe(this.isNew, (isNew) => {
-			if (isNew === undefined) return;
-			if (isNew) {
-				this.#enforceUserPermission(
-					UMB_USER_PERMISSION_DOCUMENT_CREATE,
-					'You do not have permission to create documents.',
-				);
-			} else {
-				this.#enforceUserPermission(
-					UMB_USER_PERMISSION_DOCUMENT_UPDATE,
-					'You do not have permission to update documents.',
-				);
-			}
-		});
+		this.observe(
+			this.isNew,
+			(isNew) => {
+				if (isNew === undefined) return;
+				if (isNew) {
+					this.#enforceUserPermission(
+						UMB_USER_PERMISSION_DOCUMENT_CREATE,
+						'You do not have permission to create documents.',
+					);
+				} else {
+					this.#enforceUserPermission(
+						UMB_USER_PERMISSION_DOCUMENT_UPDATE,
+						'You do not have permission to update documents.',
+					);
+				}
+			},
+			null,
+		);
 
 		this.routes.setRoutes([
 			{