Improve landingpage translation loading (#25148)

This commit is contained in:
Wendelin 2025-04-24 07:33:14 +02:00 committed by GitHub
parent 94b5ed97c6
commit b2044e88b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 5 deletions

View File

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

View File

@ -6,23 +6,23 @@ import {
type LandingPageKeys, type LandingPageKeys,
type LocalizeFunc, type LocalizeFunc,
} from "../../src/common/translations/localize"; } from "../../src/common/translations/localize";
import { computeDirectionStyles } from "../../src/common/util/compute_rtl";
import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin"; import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
import { translationMetadata } from "../../src/resources/translations-metadata";
import type { HassBaseEl } from "../../src/state/hass-base-mixin";
import themesMixin from "../../src/state/themes-mixin";
import type { Constructor, Resources } from "../../src/types"; import type { Constructor, Resources } from "../../src/types";
import { import {
getLocalLanguage, getLocalLanguage,
getTranslation, getTranslation,
} from "../../src/util/common-translation"; } from "../../src/util/common-translation";
import { computeDirectionStyles } from "../../src/common/util/compute_rtl";
import themesMixin from "../../src/state/themes-mixin";
import { translationMetadata } from "../../src/resources/translations-metadata";
import type { HassBaseEl } from "../../src/state/hass-base-mixin";
export class LandingPageBaseElement extends themesMixin( export class LandingPageBaseElement extends themesMixin(
ProvideHassLitMixin(LitElement) as unknown as Constructor<HassBaseEl> ProvideHassLitMixin(LitElement) as unknown as Constructor<HassBaseEl>
) { ) {
// Initialized to empty will prevent undefined errors if called before connected to DOM. // Initialized to empty will prevent undefined errors if called before connected to DOM.
@property({ attribute: false }) @property({ attribute: false })
public localize: LocalizeFunc<LandingPageKeys> = () => ""; public localize?: LocalizeFunc<LandingPageKeys>;
// Use browser language setup before login. // Use browser language setup before login.
@property() public language?: string = getLocalLanguage(); @property() public language?: string = getLocalLanguage();