diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts index 66655f1cd7..a44e71b5f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts @@ -34,6 +34,9 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp @state() _totalPages = 1; + @state() + _loading = false; + #workspaceContext?: typeof UMB_RELATION_TYPE_WORKSPACE_CONTEXT.TYPE; #relationCollectionRepository = new UmbRelationCollectionRepository(this); #paginationManager = new UmbPaginationManager(); @@ -73,6 +76,8 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp } async #requestRelations() { + this._loading = true; + const relationTypeUnique = this.#workspaceContext?.getUnique(); if (!relationTypeUnique) throw new Error('Relation type unique is required'); @@ -87,6 +92,7 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp if (data) { this._relations = data.items; this.#paginationManager.setTotalItems(data.total); + this._loading = false; } } @@ -164,6 +170,7 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp } #renderRelations() { + if (this._loading) return html``; return html`
@@ -207,6 +214,10 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp grid-template-columns: 1fr 350px; } + uui-loader { + text-align: center; + } + uui-pagination { margin-top: var(--uui-size-layout-1); display: block;