Оптимизировать логотип стартового экрана

VERSION.properties

@@ -1,2 +1,2 @@
-client.version=1.2.335
-server.version=1.2.307
+client.version=1.2.336
+server.version=1.2.308

shine-UI/js/pages/start-view.js

@@ -13,8 +13,19 @@ export function render({ navigate }) {
 
   const logo = document.createElement('img');
   logo.className = 'auth-logo';
-  logo.src = './img/shine-logo-transparent-final.png';
+  logo.src = './img/shine-logo-transparent-512.png';
   logo.alt = 'Логотип Сияние';
+  logo.width = 512;
+  logo.height = 512;
+  logo.decoding = 'async';
+  logo.fetchPriority = 'high';
+  if (logo.complete) {
+    logoWrap.classList.add('auth-logo-wrap--loaded');
+  } else {
+    logo.addEventListener('load', () => {
+      logoWrap.classList.add('auth-logo-wrap--loaded');
+    }, { once: true });
+  }
   logoWrap.append(logo);
 
   const title = document.createElement('h1');

shine-UI/styles/components.css

@@ -493,7 +493,13 @@
   border-radius: 50%;
   background: rgba(214, 155, 56, 0.2);
   filter: blur(30px);
+  opacity: 0;
   animation: shine-halo-breathe 4.8s ease-in-out infinite;
+  transition: opacity 420ms ease;
+}
+
+.auth-logo-wrap--loaded::before {
+  opacity: 0.66;
 }
 
 .auth-brand {
@@ -686,8 +692,8 @@
 }
 
 @keyframes shine-halo-breathe {
-  0%, 100% { opacity: 0.66; transform: scale(0.96); }
-  50% { opacity: 1; transform: scale(1.05); }
+  0%, 100% { transform: scale(0.96); }
+  50% { transform: scale(1.05); }
 }
 
 @media (min-width: 768px) {