Improve landingpage translation loading (#25148)

landing-page/src/ha-landing-page.ts

@@ -2,6 +2,8 @@ import "@material/mwc-linear-progress";
 import { type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../src/components/ha-alert";
+import "../../src/components/ha-fade-in";
+import "../../src/components/ha-spinner";
 import { haStyle } from "../../src/resources/styles";
 import "../../src/onboarding/onboarding-welcome-links";
 import "./components/landing-page-network";
@@ -40,6 +42,14 @@ class HaLandingPage extends LandingPageBaseElement {
   render() {
     const networkIssue = this._networkInfo && !this._networkInfo.host_internet;
 
+    if (!this.localize) {
+      return html`
+        <ha-fade-in>
+          <ha-spinner size="large"></ha-spinner>
+        </ha-fade-in>
+      `;
+    }
+
     return html`
       <ha-card>
         <div class="card-content">
@@ -229,6 +239,12 @@ class HaLandingPage extends LandingPageBaseElement {
         margin-inline-end: 16px;
         margin-inline-start: initial;
       }
+      ha-fade-in {
+        min-height: calc(100vh - 64px - 88px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     `,
   ];
 }