From 07d7e7ebfdc00694e7dd27f4921eb6b2ef75d39d Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 30 Apr 2024 16:52:21 +0100
Subject: [PATCH] Refactored the loading state

It previously caused a bug with the sort ordering feature.
Because the `<umb-table>` was being removed from the DOM.
It now uses an alternative loading bar.
---
 .../document-grid-collection-view.element.ts  | 41 ++++++++++++-------
 .../document-table-collection-view.element.ts | 31 +++++++++-----
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
index d3d11169a5..b94e2d9b85 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
@@ -1,7 +1,7 @@
 import { getPropertyValueByAlias } from '../index.js';
 import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js';
 import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js';
-import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -98,26 +98,37 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 	}
 
 	render() {
-		if (this._loading) {
-			return html`<div class="container"><uui-loader></uui-loader></div>`;
-		}
-
-		if (this._items.length === 0) {
-			return html`<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`;
-		}
+		return this._items.length === 0 ? this.#renderEmpty() : this.#renderItems();
+	}
 
+	#renderEmpty() {
+		if (this._items.length > 0) return nothing;
 		return html`
-			<div id="document-grid">
-				${repeat(
-					this._items,
-					(item) => item.unique,
-					(item) => this.#renderCard(item),
+			<div class="container">
+				${when(
+					this._loading,
+					() => html`<uui-loader></uui-loader>`,
+					() => html`<p>${this.localize.term('content_listViewNoItems')}</p>`,
 				)}
 			</div>
 		`;
 	}
 
-	#renderCard(item: UmbDocumentCollectionItemModel) {
+	#renderItems() {
+		if (this._items.length === 0) return nothing;
+		return html`
+			<div id="document-grid">
+				${repeat(
+					this._items,
+					(item) => item.unique,
+					(item) => this.#renderItem(item),
+				)}
+			</div>
+			${when(this._loading, () => html`<uui-loader-bar></uui-loader-bar>`)}
+		`;
+	}
+
+	#renderItem(item: UmbDocumentCollectionItemModel) {
 		return html`
 			<uui-card-content-node
 				.name=${item.name ?? 'Unnamed Document'}
@@ -153,7 +164,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 				>`;
 			default:
 				return html`<uui-tag slot="tag" color="danger" look="secondary">${fromCamelCase(item.state)}</uui-tag>`;
-		}
+	}
 	}
 
 	#renderProperties(item: UmbDocumentCollectionItemModel) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
index 93534ff9ee..54683263d1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
@@ -2,7 +2,7 @@ import { getPropertyValueByAlias } from '../index.js';
 import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js';
 import type { UmbDocumentCollectionItemModel } from '../../types.js';
 import type { UmbDocumentCollectionContext } from '../../document-collection.context.js';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
@@ -193,23 +193,34 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 	}
 
 	render() {
-		if (this._loading) {
-			return html`<div class="container"><uui-loader></uui-loader></div>`;
-		}
+		return this._tableItems.length === 0 ? this.#renderEmpty() : this.#renderItems();
+	}
 
-		if (this._tableItems.length === 0) {
-			return html`<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`;
-		}
+	#renderEmpty() {
+		if (this._tableItems.length > 0) return nothing;
+		return html`
+			<div class="container">
+				${when(
+					this._loading,
+					() => html`<uui-loader></uui-loader>`,
+					() => html`<p>${this.localize.term('content_listViewNoItems')}</p>`,
+				)}
+			</div>
+		`;
+	}
 
+	#renderItems() {
+		if (this._tableItems.length === 0) return nothing;
 		return html`
 			<umb-table
 				.config=${this._tableConfig}
 				.columns=${this._tableColumns}
 				.items=${this._tableItems}
 				.selection=${this._selection}
-				@selected="${this.#handleSelect}"
-				@deselected="${this.#handleDeselect}"
-				@ordered="${this.#handleOrdering}"></umb-table>
+				@selected=${this.#handleSelect}
+				@deselected=${this.#handleDeselect}
+				@ordered=${this.#handleOrdering}></umb-table>
+			${when(this._loading, () => html`<uui-loader-bar></uui-loader-bar>`)}
 		`;
 	}