Prioritize core.js (#5636)

* Prioritize loading app core script

* change app skeleton to be small
This commit is contained in:
Paulus Schoutsen 2017-01-29 18:36:48 -08:00 committed by GitHub
parent 847a5a064d
commit b5047bbaad

View File

@ -9,6 +9,7 @@
<link rel='apple-touch-icon' sizes='180x180' <link rel='apple-touch-icon' sizes='180x180'
href='/static/icons/favicon-apple-180x180.png'> href='/static/icons/favicon-apple-180x180.png'>
<link rel="mask-icon" href="/static/icons/home-assistant-icon.svg" color="#3fbbf4"> <link rel="mask-icon" href="/static/icons/home-assistant-icon.svg" color="#3fbbf4">
<link rel='preload' href='{{ core_url }}' as='script'/>
{% for panel in panels.values() -%} {% for panel in panels.values() -%}
<link rel='prefetch' href='{{ panel.url }}'> <link rel='prefetch' href='{{ panel.url }}'>
{% endfor -%} {% endfor -%}
@ -27,32 +28,25 @@
font-weight: 300; font-weight: 300;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
margin: 0;
padding: 0;
} }
#ha-init-skeleton { #ha-init-skeleton::before {
display: -webkit-flex; display: block;
display: flex; content: "";
-webkit-flex-direction: column; height: 48px;
-webkit-justify-content: center; background-color: #03A9F4;
-webkit-align-items: center; }
flex-direction: column;
justify-content: center; #ha-init-skeleton .message {
align-items: center;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 83px;
font-family: Roboto, sans-serif;
font-size: 0pt;
transition: font-size 2s; transition: font-size 2s;
font-size: 0;
padding: 24px;
} }
#ha-init-skeleton paper-spinner { #ha-init-skeleton.error .message {
height: 28px; font-size: 16px;
margin-top: 16px;
} }
#ha-init-skeleton a { #ha-init-skeleton a {
@ -60,15 +54,6 @@
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
#ha-init-skeleton.error {
font-size: 16px;
}
#ha-init-skeleton.error img,
#ha-init-skeleton.error paper-spinner {
display: none;
}
</style> </style>
<script> <script>
function initError() { function initError() {
@ -82,9 +67,9 @@
</head> </head>
<body> <body>
<div id='ha-init-skeleton'> <div id='ha-init-skeleton'>
<img src='/static/icons/favicon-192x192.png' height='192'> <div class='message'>
<paper-spinner active></paper-spinner> Home Assistant had trouble<br>connecting to the server.<br><br><a href='/'>TRY AGAIN</a>
Home Assistant had trouble<br>connecting to the server.<br><br><a href='/'>TRY AGAIN</a> </div>
</div> </div>
<home-assistant icons='{{ icons }}'></home-assistant> <home-assistant icons='{{ icons }}'></home-assistant>
{# <script src='/static/home-assistant-polymer/build/_demo_data_compiled.js'></script> #} {# <script src='/static/home-assistant-polymer/build/_demo_data_compiled.js'></script> #}