Add loading skeletons and refactor loading state in HuiElementEditor

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -121,7 +121,13 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
   }
 
   static override styles = [
+    HuiTypedElementEditor.styles,
     css`
+      .gui-editor,
+      .yaml-editor {
+        padding: 0;
+      }
+
       ha-tab-group {
         margin-bottom: 16px;
       }

src/panels/lovelace/editor/hui-element-editor.ts

@@ -6,8 +6,10 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { handleStructError } from "../../../common/structs/handle-errors";
 import { deepEqual } from "../../../common/util/deep-equal";
+import "../../../components/animation/ha-fade-in";
 import "../../../components/ha-alert";
-import "../../../components/ha-spinner";
+import "../../../components/skeleton/ha-skeleton";
+import "../../../components/skeleton/ha-skeleton-text";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import type { LovelaceConfig } from "../../../data/lovelace/config/types";
@@ -230,6 +232,31 @@ export abstract class HuiElementEditor<
     };
   }
 
+  private _renderLoading() {
+    return html`
+      <ha-fade-in .duration=${300} easing="ease-in">
+        <div
+          class="loading"
+          role="progressbar"
+          aria-label=${this.hass.localize("ui.common.loading")}
+        >
+          <div class="loading-field">
+            <ha-skeleton-text></ha-skeleton-text>
+            <ha-skeleton class="input"></ha-skeleton>
+          </div>
+          <div class="loading-field">
+            <ha-skeleton-text></ha-skeleton-text>
+            <div class="boxes">
+              <ha-skeleton class="box"></ha-skeleton>
+              <ha-skeleton class="box"></ha-skeleton>
+              <ha-skeleton class="box"></ha-skeleton>
+            </div>
+          </div>
+        </div>
+      </ha-fade-in>
+    `;
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="wrapper">
@@ -242,9 +269,7 @@ export abstract class HuiElementEditor<
                 >
                   ${
                     this._loading
-                      ? html`
-                          <ha-spinner class="center margin-bot"></ha-spinner>
-                        `
+                      ? this._renderLoading()
                       : cache(
                           this._subElementEditorConfig
                             ? this._renderSubElement()
@@ -368,7 +393,11 @@ export abstract class HuiElementEditor<
   }
 
   protected async loadConfigElement(): Promise<void> {
-    if (this._configElement) return;
+    if (this._configElement) {
+      return;
+    }
+
+    this._loading = true;
 
     let configElement = await this.getConfigElement();
 
@@ -447,7 +476,9 @@ export abstract class HuiElementEditor<
       }
       this.GUImode = false;
     } finally {
-      this._loading = false;
+      if (loadNum === this._loadCount) {
+        this._loading = false;
+      }
     }
   }
 
@@ -469,9 +500,33 @@ export abstract class HuiElementEditor<
     ha-code-editor {
       --code-mirror-max-height: calc(100vh - 245px);
     }
-    ha-spinner {
-      display: block;
-      margin: auto;
+    .loading {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-6);
+    }
+    .loading-field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-2);
+    }
+    .loading ha-skeleton-text {
+      --ha-skeleton-text-width: 120px;
+    }
+    .loading .input {
+      height: 56px;
+    }
+    .loading .boxes {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: var(--ha-space-3);
+    }
+    .loading .box {
+      height: 96px;
+      --ha-skeleton-border-radius: var(
+        --ha-card-border-radius,
+        var(--ha-border-radius-lg)
+      );
     }
   ` as CSSResultGroup;
 }