fix blinking show logs

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts

@@ -73,6 +73,9 @@ export class UmbLogViewerWorkspaceContext {
 	#canShowLogs = new UmbBasicState<boolean | null>(null);
 	canShowLogs = createObservablePart(this.#canShowLogs, (data) => data);
 
+	#isLoadingLogs = new UmbBasicState<boolean | null>(null);
+	isLoadingLogs = createObservablePart(this.#isLoadingLogs, (data) => data);
+
 	#filterExpression = new UmbStringState<string>('');
 	filterExpression = createObservablePart(this.#filterExpression, (data) => data);
 
@@ -86,6 +89,8 @@ export class UmbLogViewerWorkspaceContext {
 	logs = createObservablePart(this.#logs, (data) => data?.items);
 	logsTotal = createObservablePart(this.#logs, (data) => data?.total);
 
+
+
 	#polling = new UmbObjectState<PoolingCOnfig>({ enabled: false, interval: 2000 });
 	polling = createObservablePart(this.#polling, (data) => data);
 
@@ -105,13 +110,7 @@ export class UmbLogViewerWorkspaceContext {
 		this.validateLogSize();
 	}
 
-	reset() {
-		this.#logs.next({ items: [], total: 0 });
-		this.setCurrentPage(1);
-	}
-
 	onChangeState = () => {
-		this.reset();
 
 		const searchQuery = query();
 		let sanitizedQuery = '';
@@ -266,6 +265,9 @@ export class UmbLogViewerWorkspaceContext {
 			return;
 		}
 
+		this.#isLoadingLogs.next(true);
+
+
 		const skip = (this.currentPage - 1) * 100;
 		const take = 100;
 
@@ -279,9 +281,10 @@ export class UmbLogViewerWorkspaceContext {
 		};
 
 		const { data } = await this.#repository.getLogs(options);
-
+		this.#isLoadingLogs.next(false);
 		if (data) {
 			this.#logs.next(data);
+
 		}
 	};
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts

@@ -8,8 +8,6 @@ import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice
 
 @customElement('umb-log-viewer-messages-list')
 export class UmbLogViewerMessagesListElement extends UmbLitElement {
-	
-
 	@query('#logs-scroll-container')
 	private _logsScrollContainer!: UUIScrollContainerElement;
 
@@ -22,6 +20,9 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 	@state()
 	private _logsTotal = 0;
 
+	@state()
+	private _isLoading = true;
+
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 
 	constructor() {
@@ -40,6 +41,10 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 			this._logs = logs ?? [];
 		});
 
+		this.observe(this.#logViewerContext.isLoadingLogs, (isLoading) => {
+			this._isLoading = isLoading === null ? this._isLoading : isLoading;
+		});
+
 		this.observe(this.#logViewerContext.logsTotal, (total) => {
 			this._logsTotal = total ?? 0;
 		});
@@ -74,6 +79,24 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 		</div>`;
 	}
 
+	#renderLogs() {
+		return html`${this._logs.length > 0
+			? html` ${this._logs.map(
+					(log) => html`<umb-log-viewer-message
+						.timestamp=${log.timestamp ?? ''}
+						.level=${log.level ?? ''}
+						.renderedMessage=${log.renderedMessage ?? ''}
+						.properties=${log.properties ?? []}
+						.exception=${log.exception ?? ''}
+						.messageTemplate=${log.messageTemplate ?? ''}></umb-log-viewer-message>`
+			  )}`
+			: html`<umb-empty-state size="small"
+					><span id="empty">
+						<uui-icon name="umb:search"></uui-icon>Sorry, we cannot find what you are looking for.
+					</span></umb-empty-state
+			  >`}`;
+	}
+
 	render() {
 		return html`<uui-box>
 			<p style="font-weight: bold;">Total items: ${this._logsTotal}</p>
@@ -90,25 +113,14 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 				<div id="machine">Machine name</div>
 				<div id="message">Message</div>
 			</div>
-			${this._logs.length > 0
-				? html` ${this._logs.map(
-						(log) => html`<umb-log-viewer-message
-							.timestamp=${log.timestamp ?? ''}
-							.level=${log.level ?? ''}
-							.renderedMessage=${log.renderedMessage ?? ''}
-							.properties=${log.properties ?? []}
-							.exception=${log.exception ?? ''}
-							.messageTemplate=${log.messageTemplate ?? ''}></umb-log-viewer-message>`
-				  )}`
-				: html`<umb-empty-state size="small"
-						><span id="empty">
-							<uui-icon name="umb:search"></uui-icon>Sorry, we cannot find what you are looking for.
-						</span></umb-empty-state
-				  >`}
-			${this._renderPagination()}
+			${this._isLoading
+				? html`<umb-empty-state size="small"
+						><span id="empty"> <uui-loader-circle></uui-loader-circle>Loading log messages... </span></umb-empty-state
+				  >`
+				: html`${this.#renderLogs()}${this._renderPagination()}`}
 		</uui-box>`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts

@@ -7,10 +7,8 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a
 
 @customElement('umb-log-viewer-search-view')
 export class UmbLogViewerSearchViewElement extends UmbLitElement {
-	
-
 	@state()
-	private _canShowLogs = false;
+	private _canShowLogs = true;
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 
@@ -29,7 +27,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 		if (!this.#logViewerContext) return;
 
 		this.#canShowLogsObserver = this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
-			this._canShowLogs = canShowLogs ?? false;
+			this._canShowLogs = canShowLogs ?? this._canShowLogs;
 		});
 	}
 
@@ -52,7 +50,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`