jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve startup experience by removing AppBar skeleton (#10569)

Browse Source
This commit is contained in:
Lasse Rosenow 2021-11-15 16:54:59 +01:00 committed by GitHub
parent 4e68383cf7
commit 3154011c65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 205 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
demo/src/html/index.html.template
View File

@ -63,6 +63,16 @@
/> />
<title>Home Assistant Demo</title> <title>Home Assistant Demo</title>
<style> <style>
html {
background-color: var(--primary-background-color, #fafafa);
color: var(--primary-text-color, #212121);
}
@media (prefers-color-scheme: dark) {
html {
background-color: var(--primary-background-color, #111111);
color: var(--primary-text-color, #e1e1e1);
}
}
body { body {
font-family: Roboto, Noto, sans-serif; font-family: Roboto, Noto, sans-serif;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -72,17 +82,46 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#ha-init-skeleton::before { #ha-launch-screen {
display: block; height: 100%;
content: ""; display: flex;
height: 64px; flex-direction: column;
background-color: #03a9f4; justify-content: center;
align-items: center;
}
#ha-launch-screen svg {
width: 170px;
flex-shrink: 0;
}
#ha-launch-screen .ha-launch-screen-spacer {
flex: 1;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="ha-init-skeleton"></div> <div id="ha-launch-screen">
<div class="ha-launch-screen-spacer"></div>
<svg version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="a" d="m44.041 343.22v-133.64h-34.753a9.333 9.333 0 0 1-6.655-15.876l187.01-190.21c4.517-4.594 11.903-4.657 16.498-0.14l0.12 0.12 97.601 98.794v-18.297a7.778 7.778 0 0 1 7.778-7.778h32.41a7.778 7.778 0 0 1 7.779 7.778v67.138l41.568 42.618a9.333 9.333 0 0 1-6.682 15.85h-34.886v133.64a7.778 7.778 0 0 1-7.778 7.778h-292.23a7.778 7.778 0 0 1-7.778-7.778zm206.39-163.26a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.044 14.99 15.044c2.314 0 4.505-0.527 6.462-1.467l21.518 21.596v20.918l-26.981 27.078v-19.84a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v29.868l-24.983 25.073v-147.28l20.519-20.592a14.886 14.886 0 0 0 6.462 1.466c8.279 0 14.99-6.735 14.99-15.044 0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043 0 2.323 0.524 4.522 1.46 6.486l-18.448 18.515-18.449-18.515a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043 0 8.309 6.711 15.044 14.99 15.044 2.314 0 4.505-0.527 6.462-1.466l20.518 20.592v105.16l-35.974-36.104v-28.865a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v18.837l-27.98-28.081v-27.863a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v32.017l30.907 31.018h-17.77c-2.058-5.843-7.61-10.029-14.137-10.029-8.278 0-14.99 6.735-14.99 15.043 0 8.309 6.712 15.044 14.99 15.044 6.527 0 12.08-4.186 14.137-10.03h27.763l43.04 43.196v75.074l-22.983-23.066v-28.866a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.99 6.735-14.99 15.043 0 6.55 4.172 12.122 9.994 14.187v18.837l-33.439-33.558a15.029 15.029 0 0 0 1.461-6.486c0-8.308-6.71-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.043 14.99 15.043c2.314 0 4.506-0.526 6.462-1.466l33.439 33.559h-17.77c-2.058-5.843-7.61-10.03-14.137-10.03-8.278 0-14.99 6.736-14.99 15.044s6.712 15.043 14.99 15.043c6.527 0 12.079-4.186 14.137-10.029h27.763l27.98 28.081h14.132l28.98-29.083h26.763c2.058 5.842 7.61 10.028 14.137 10.028 8.278 0 14.99-6.735 14.99-15.043s-6.712-15.043-14.99-15.043c-6.527 0-12.079 4.186-14.137 10.029h-30.902l-26.91 27.006v-32.951l32.049-32.164h51.746c2.058 5.843 7.61 10.029 14.136 10.029 8.279 0 14.99-6.735 14.99-15.043 0-8.309-6.711-15.044-14.99-15.044-6.526 0-12.078 4.186-14.136 10.03h-41.755l29.908-30.016v-25.072l21.517-21.596a14.886 14.886 0 0 0 6.463 1.467c8.278 0 14.99-6.736 14.99-15.044s-6.712-15.043-14.99-15.043-14.99 6.735-14.99 15.043c0 2.323 0.525 4.522 1.461 6.486l-14.451 14.504v-45.917a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v45.915l-14.452-14.504zm-129.45 143.95c-3.311 0-5.996-2.694-5.996-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm43.97-45.13c-3.312 0-5.997-2.694-5.997-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm-51.964-7.02c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm-4.997-50.144c-3.311 0-5.995-2.694-5.995-6.018 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm124.91 7.02c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm67.952 46.133c-3.31 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-25.981 48.138c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm27.98-143.41c-3.311 0-5.996-2.695-5.996-6.018s2.685-6.017 5.996-6.017 5.996 2.694 5.996 6.017-2.685 6.018-5.996 6.018zm-32.977-39.113c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-39.972-24.07c-3.311 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-63.955 0c-3.31 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-51.963 23.067c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018s5.996 2.694 5.996 6.018c0 3.323-2.685 6.017-5.996 6.017zm37.973 37.107c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm84.94 3.009c-3.31 0-5.995-2.695-5.995-6.018s2.684-6.017 5.995-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.018-5.996 6.018z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="500" height="500" ry="40.911" fill="#41bdf5" fill-rule="evenodd" stroke-width="5.8497"/>
<g transform="translate(52 70)">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#FFF" mask="url(#b)">
<path d="M0 0h396v351H0z"/>
</g>
</g>
</g>
</svg>
<div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
</div>
<ha-demo></ha-demo> <ha-demo></ha-demo>
<%= renderTemplate('_js_base') %> <%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %> <%= renderTemplate('_preload_roboto') %>

61
src/html/index.html.template
View File

@ -39,29 +39,64 @@
<meta name="theme-color" content="#THEMEC" /> <meta name="theme-color" content="#THEMEC" />
<meta name="color-scheme" content="dark light" /> <meta name="color-scheme" content="dark light" />
<style> <style>
#ha-init-skeleton::before {
display: block;
content: "";
height: 56px;
background-color: #THEMEC;
}
html { html {
background-color: var(--primary-background-color); background-color: var(--primary-background-color, #fafafa);
color: var(--primary-text-color, #212121);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background-color: #111111; background-color: var(--primary-background-color, #111111);
color: #e1e1e1; color: var(--primary-text-color, #e1e1e1);
} }
#ha-init-skeleton::before {
background-color: #1c1c1c;
} }
body {
font-family: Roboto, Noto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: 400;
height: 100vh;
margin: 0;
padding: 0;
}
#ha-launch-screen {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#ha-launch-screen svg {
width: 170px;
flex-shrink: 0;
}
#ha-launch-screen .ha-launch-screen-spacer {
flex: 1;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="ha-init-skeleton"></div> <div id="ha-launch-screen">
<home-assistant> </home-assistant> <div class="ha-launch-screen-spacer"></div>
<svg version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="a" d="m44.041 343.22v-133.64h-34.753a9.333 9.333 0 0 1-6.655-15.876l187.01-190.21c4.517-4.594 11.903-4.657 16.498-0.14l0.12 0.12 97.601 98.794v-18.297a7.778 7.778 0 0 1 7.778-7.778h32.41a7.778 7.778 0 0 1 7.779 7.778v67.138l41.568 42.618a9.333 9.333 0 0 1-6.682 15.85h-34.886v133.64a7.778 7.778 0 0 1-7.778 7.778h-292.23a7.778 7.778 0 0 1-7.778-7.778zm206.39-163.26a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.044 14.99 15.044c2.314 0 4.505-0.527 6.462-1.467l21.518 21.596v20.918l-26.981 27.078v-19.84a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v29.868l-24.983 25.073v-147.28l20.519-20.592a14.886 14.886 0 0 0 6.462 1.466c8.279 0 14.99-6.735 14.99-15.044 0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043 0 2.323 0.524 4.522 1.46 6.486l-18.448 18.515-18.449-18.515a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043 0 8.309 6.711 15.044 14.99 15.044 2.314 0 4.505-0.527 6.462-1.466l20.518 20.592v105.16l-35.974-36.104v-28.865a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v18.837l-27.98-28.081v-27.863a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v32.017l30.907 31.018h-17.77c-2.058-5.843-7.61-10.029-14.137-10.029-8.278 0-14.99 6.735-14.99 15.043 0 8.309 6.712 15.044 14.99 15.044 6.527 0 12.08-4.186 14.137-10.03h27.763l43.04 43.196v75.074l-22.983-23.066v-28.866a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.99 6.735-14.99 15.043 0 6.55 4.172 12.122 9.994 14.187v18.837l-33.439-33.558a15.029 15.029 0 0 0 1.461-6.486c0-8.308-6.71-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.043 14.99 15.043c2.314 0 4.506-0.526 6.462-1.466l33.439 33.559h-17.77c-2.058-5.843-7.61-10.03-14.137-10.03-8.278 0-14.99 6.736-14.99 15.044s6.712 15.043 14.99 15.043c6.527 0 12.079-4.186 14.137-10.029h27.763l27.98 28.081h14.132l28.98-29.083h26.763c2.058 5.842 7.61 10.028 14.137 10.028 8.278 0 14.99-6.735 14.99-15.043s-6.712-15.043-14.99-15.043c-6.527 0-12.079 4.186-14.137 10.029h-30.902l-26.91 27.006v-32.951l32.049-32.164h51.746c2.058 5.843 7.61 10.029 14.136 10.029 8.279 0 14.99-6.735 14.99-15.043 0-8.309-6.711-15.044-14.99-15.044-6.526 0-12.078 4.186-14.136 10.03h-41.755l29.908-30.016v-25.072l21.517-21.596a14.886 14.886 0 0 0 6.463 1.467c8.278 0 14.99-6.736 14.99-15.044s-6.712-15.043-14.99-15.043-14.99 6.735-14.99 15.043c0 2.323 0.525 4.522 1.461 6.486l-14.451 14.504v-45.917a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v45.915l-14.452-14.504zm-129.45 143.95c-3.311 0-5.996-2.694-5.996-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm43.97-45.13c-3.312 0-5.997-2.694-5.997-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm-51.964-7.02c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm-4.997-50.144c-3.311 0-5.995-2.694-5.995-6.018 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm124.91 7.02c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm67.952 46.133c-3.31 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-25.981 48.138c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm27.98-143.41c-3.311 0-5.996-2.695-5.996-6.018s2.685-6.017 5.996-6.017 5.996 2.694 5.996 6.017-2.685 6.018-5.996 6.018zm-32.977-39.113c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-39.972-24.07c-3.311 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-63.955 0c-3.31 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-51.963 23.067c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018s5.996 2.694 5.996 6.018c0 3.323-2.685 6.017-5.996 6.017zm37.973 37.107c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm84.94 3.009c-3.31 0-5.995-2.695-5.995-6.018s2.684-6.017 5.995-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.018-5.996 6.018z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="500" height="500" ry="40.911" fill="#41bdf5" fill-rule="evenodd" stroke-width="5.8497"/>
<g transform="translate(52 70)">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#FFF" mask="url(#b)">
<path d="M0 0h396v351H0z"/>
</g>
</g>
</g>
</svg>
<div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
</div>
<home-assistant></home-assistant>
<%= renderTemplate('_js_base') %> <%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %> <%= renderTemplate('_preload_roboto') %>

58
src/layouts/ha-init-page.ts
View File

@ -1,26 +1,25 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement } from "lit"; import { css, CSSResultGroup, html, LitElement } from "lit";
import { property } from "lit/decorators"; import { property, state } from "lit/decorators";
import "../components/ha-circular-progress";
import { removeInitSkeleton } from "../util/init-skeleton";
class HaInitPage extends LitElement { class HaInitPage extends LitElement {
@property({ type: Boolean }) public error = false; @property({ type: Boolean }) public error = false;
@state() showProgressIndicator = false;
private _showProgressIndicatorTimeout;
protected render() { protected render() {
return html` return this.error
<div>
<img src="/static/icons/favicon-192x192.png" height="192" />
${this.error
? html` ? html`
<p>Unable to connect to Home Assistant.</p> <p>Unable to connect to Home Assistant.</p>
<mwc-button @click=${this._retry}>Retry</mwc-button> <mwc-button @click=${this._retry}>Retry</mwc-button>
${location.host.includes("ui.nabu.casa") ${location.host.includes("ui.nabu.casa")
? html` ? html`
<p> <p>
It is possible that you are seeing this screen because It is possible that you are seeing this screen because your
your Home Assistant is not currently connected. You can Home Assistant is not currently connected. You can ask it to
ask it to come online from your come online from your
<a href="https://account.nabucasa.com/" <a href="https://account.nabucasa.com/"
>Naba Casa account page</a >Naba Casa account page</a
>. >.
@ -29,15 +28,25 @@ class HaInitPage extends LitElement {
: ""} : ""}
` `
: html` : html`
<ha-circular-progress active></ha-circular-progress> <div id="progress-indicator-wrapper">
<p>Loading data</p> ${this.showProgressIndicator
`} ? html`<ha-circular-progress active></ha-circular-progress>`
: ""}
</div> </div>
<div id="loading-text">Loading data</div>
`; `;
} }
disconnectedCallback() {
super.disconnectedCallback();
clearTimeout(this._showProgressIndicatorTimeout);
}
protected firstUpdated() { protected firstUpdated() {
removeInitSkeleton(); this._showProgressIndicatorTimeout = setTimeout(async () => {
await import("../components/ha-circular-progress");
this.showProgressIndicator = true;
}, 5000);
} }
private _retry() { private _retry() {
@ -46,20 +55,23 @@ class HaInitPage extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
div { :host {
height: 100%; flex: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
} }
ha-circular-progress { #progress-indicator-wrapper {
margin-top: 9px; display: flex;
align-items: center;
margin: 25px 0;
height: 50px;
} }
a { a {
color: var(--primary-color); color: var(--primary-color);
} }
p { p,
#loading-text {
max-width: 350px; max-width: 350px;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
@ -68,3 +80,9 @@ class HaInitPage extends LitElement {
} }
customElements.define("ha-init-page", HaInitPage); customElements.define("ha-init-page", HaInitPage);
declare global {
interface HTMLElementTagNameMap {
"ha-init-page": HaInitPage;
}
}

43
src/layouts/home-assistant.ts
View File

@ -8,6 +8,10 @@ import { HassElement } from "../state/hass-element";
import QuickBarMixin from "../state/quick-bar-mixin"; import QuickBarMixin from "../state/quick-bar-mixin";
import { HomeAssistant, Route } from "../types"; import { HomeAssistant, Route } from "../types";
import { storeState } from "../util/ha-pref-storage"; import { storeState } from "../util/ha-pref-storage";
import {
renderLaunchScreenInfoBox,
removeLaunchScreen,
} from "../util/launch-screen";
import { import {
registerServiceWorker, registerServiceWorker,
supportsServiceWorker, supportsServiceWorker,
@ -40,6 +44,8 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
private _visiblePromiseResolve?: () => void; private _visiblePromiseResolve?: () => void;
private _visibleLaunchScreen = true;
constructor() { constructor() {
super(); super();
const path = curPath(); const path = curPath();
@ -55,16 +61,26 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
} }
protected render() { protected render() {
const hass = this.hass; if (this._isHassComplete() && this.hass) {
return html`
return hass && hass.states && hass.config && hass.services
? html`
<home-assistant-main <home-assistant-main
.hass=${this.hass} .hass=${this.hass}
.route=${this._route} .route=${this._route}
></home-assistant-main> ></home-assistant-main>
` `;
: html`<ha-init-page .error=${this._error}></ha-init-page>`; }
return "";
}
update(changedProps) {
super.update(changedProps);
// Remove launch screen if main gui is loaded
if (this._isHassComplete() && this._visibleLaunchScreen) {
this._visibleLaunchScreen = false;
removeLaunchScreen();
}
} }
protected firstUpdated(changedProps) { protected firstUpdated(changedProps) {
@ -109,6 +125,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
navigate(href); navigate(href);
} }
}); });
// Render launch screen info box (loading data / error message)
if (!this._isHassComplete() && this._visibleLaunchScreen) {
renderLaunchScreenInfoBox(
html`<ha-init-page .error=${this._error}></ha-init-page>`
);
}
} }
protected updated(changedProps: PropertyValues): void { protected updated(changedProps: PropertyValues): void {
@ -229,6 +252,14 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
this._visiblePromiseResolve = undefined; this._visiblePromiseResolve = undefined;
} }
} }
private _isHassComplete(): boolean {
if (this.hass?.states && this.hass.config && this.hass.services) {
return true;
}
return false;
}
} }
declare global { declare global {

4
src/layouts/partial-panel-resolver.ts
View File

@ -11,7 +11,7 @@ import { deepEqual } from "../common/util/deep-equal";
import { getDefaultPanel } from "../data/panel"; import { getDefaultPanel } from "../data/panel";
import { CustomPanelInfo } from "../data/panel_custom"; import { CustomPanelInfo } from "../data/panel_custom";
import { HomeAssistant, Panels } from "../types"; import { HomeAssistant, Panels } from "../types";
import { removeInitSkeleton } from "../util/init-skeleton"; import { removeLaunchScreen } from "../util/launch-screen";
import { import {
HassRouterPage, HassRouterPage,
RouteOptions, RouteOptions,
@ -226,7 +226,7 @@ class PartialPanelResolver extends HassRouterPage {
) { ) {
await this.rebuild(); await this.rebuild();
await this.pageRendered; await this.pageRendered;
removeInitSkeleton(); removeLaunchScreen();
} }
} }
} }

6
src/util/init-skeleton.ts
View File

@ -1,6 +0,0 @@
export const removeInitSkeleton = () => {
const initEl = document.getElementById("ha-init-skeleton");
if (initEl) {
initEl.parentElement!.removeChild(initEl);
}
};

15
src/util/launch-screen.ts Normal file
View File

@ -0,0 +1,15 @@
import { render, TemplateResult } from "lit";
export const removeLaunchScreen = () => {
const launchScreenElement = document.getElementById("ha-launch-screen");
if (launchScreenElement) {
launchScreenElement.parentElement!.removeChild(launchScreenElement);
}
};
export const renderLaunchScreenInfoBox = (element: TemplateResult) => {
const infoBoxElement = document.getElementById("ha-launch-screen-info-box");
if (infoBoxElement) {
render(element, infoBoxElement);
}
};