From 1c12c1c4e6c0e643b75b05129be6b279dcb2b5d0 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 29 Nov 2022 14:20:03 +0100
Subject: [PATCH] add loading state to performance profiling dashboard

---
 ...dashboard-performance-profiling.element.ts | 91 ++++++++++---------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
index d04cbfb08c..78e8195064 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
@@ -56,61 +56,62 @@ export class UmbDashboardPerformanceProfilingElement extends UmbContextConsumerM
 	connectedCallback(): void {
 		super.connectedCallback();
 		this._getProfilingStatus();
-		if (localStorage.getItem('profilingPerformance') === 'true') this._profilingPerfomance = true;
-		else this._profilingPerfomance = false;
+		this._profilingPerfomance = localStorage.getItem('profilingPerformance') === 'true';
 	}
 
 	private _changeProfilingPerformance() {
 		this._profilingPerfomance = !this._profilingPerfomance;
-		this._profilingPerfomance
-			? localStorage.setItem('profilingPerformance', 'true')
-			: localStorage.setItem('profilingPerformance', 'false');
+		localStorage.setItem('profilingPerformance', this._profilingPerfomance.toString());
+	}
+
+	private renderProfilingStatus() {
+		return this._profilingStatus
+			? html`
+					<p>
+						Umbraco currently runs in debug mode. This means you can use the built-in performance profiler to assess the
+						performance when rendering pages.
+					</p>
+					<p>
+						If you want to activate the profiler for a specific page rendering, simply add
+						<strong>umbDebug=true</strong> to the querystring when requesting the page.
+					</p>
+
+					<p>
+						If you want the profiler to be activated by default for all page renderings, you can use the toggle below.
+						It will set a cookie in your browser, which then activates the profiler automatically. In other words, the
+						profiler will only be active by default in your browser - not everyone else's.
+					</p>
+
+					<uui-toggle
+						label="Activate the profiler by default"
+						label-position="left"
+						.checked="${this._profilingPerfomance}"
+						@change="${this._changeProfilingPerformance}"></uui-toggle>
+
+					<h4>Friendly reminder</h4>
+					<p>
+						You should never let a production site run in debug mode. Debug mode is turned off by setting
+						Umbraco:CMS:Hosting:Debug to false in appsettings.json, appsettings.{Environment}.json or via an environment
+						variable.
+					</p>
+			  `
+			: html`
+					<p>
+						Umbraco currently does not run in debug mode, so you can't use the built-in profiler. This is how it should
+						be for a production site.
+					</p>
+					<p>
+						Debug mode is turned on by setting <b>debug="true"</b> on the <b>&lt;compilation /&gt;</b> element in
+						web.config.
+					</p>
+			  `;
 	}
 
 	render() {
 		return html`
 			<uui-box>
 				<h1>Performance Profiling</h1>
-				${this._profilingStatus
-					? html`
-							<p>
-								Umbraco currently runs in debug mode. This means you can use the built-in performance profiler to assess
-								the performance when rendering pages.
-							</p>
-							<p>
-								If you want to activate the profiler for a specific page rendering, simply add
-								<strong>umbDebug=true</strong> to the querystring when requesting the page.
-							</p>
-
-							<p>
-								If you want the profiler to be activated by default for all page renderings, you can use the toggle
-								below. It will set a cookie in your browser, which then activates the profiler automatically. In other
-								words, the profiler will only be active by default in your browser - not everyone else's.
-							</p>
-
-							<uui-toggle
-								label="Activate the profiler by default"
-								label-position="left"
-								.checked="${this._profilingPerfomance}"
-								@change="${this._changeProfilingPerformance}"></uui-toggle>
-
-							<h4>Friendly reminder</h4>
-							<p>
-								You should never let a production site run in debug mode. Debug mode is turned off by setting
-								Umbraco:CMS:Hosting:Debug to false in appsettings.json, appsettings.{Environment}.json or via an
-								environment variable.
-							</p>
-					  `
-					: html`
-							<p>
-								Umbraco currently does not run in debug mode, so you can't use the built-in profiler. This is how it
-								should be for a production site.
-							</p>
-							<p>
-								Debug mode is turned on by setting <b>debug="true"</b> on the <b>&lt;compilation /&gt;</b> element in
-								web.config.
-							</p>
-					  `}
+				${typeof this._profilingStatus === 'undefined' ? html`<uui-loader></uui-loader>` : this.renderProfilingStatus()}
 			</uui-box>
 		`;
 	}