From 0a7667323d00901d58a455f821a02195a4b8ee87 Mon Sep 17 00:00:00 2001
From: fydar <fydar.dev@gmail.com>
Date: Wed, 20 Mar 2024 12:49:08 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Attempting=20to=20improve=20embedde?=
 =?UTF-8?q?d=20Unity=20player=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Layout/EmbedUnity.razor        | 30 ++++++++++---------
 .../Pages/Projects/AstralElites.razor         |  2 +-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/Fydar.Dev.WebApp/Components/Layout/EmbedUnity.razor b/src/Fydar.Dev.WebApp/Components/Layout/EmbedUnity.razor
index 3963b902..1221f564 100644
--- a/src/Fydar.Dev.WebApp/Components/Layout/EmbedUnity.razor
+++ b/src/Fydar.Dev.WebApp/Components/Layout/EmbedUnity.razor
@@ -1,8 +1,8 @@
-<div class="embed" id="@UnityContainer" @attributes="AdditionalAttributes">
+<div class="embed loading" style="--loading-percentage: 0%;" id="@UnityContainer" @attributes="AdditionalAttributes">
     <canvas class="embed-canvas" id="@UnityCanvas" width=960 height=600 tabindex="-1"></canvas>
     <div class="embed-placeholder">
         @Placeholder
-        <div class="progress" role="progressbar">
+        <div class="progress">
             <div class="progress-bar" style="width: var(--loading-percentage);"></div>
         </div>
     </div>
@@ -21,8 +21,9 @@
         var div = document.createElement('div');
         div.innerHTML = msg;
         warningBanner.appendChild(div);
-        if (type == 'error') div.style = 'background: red; padding: 10px;';
-        else {
+        if (type == 'error') {
+            div.style = 'background: red; padding: 10px;';
+        } else {
             if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
             setTimeout(function () {
                 warningBanner.removeChild(div);
@@ -34,19 +35,20 @@
 
     config.showBanner = unityShowBanner;
 
-    container.classList.add("loading");
-
     var script = document.createElement("script");
     script.src = loaderUrl;
+    script.setAttribute("async", "");
     script.onload = () => {
-        createUnityInstance(canvas, config, (progress) => {
-            container.style.setProperty('--loading-percentage', 100 * progress + "%");
-        }).then((unityInstance) => {
-            container.style.setProperty('--loading-percentage', "100%");
-            container.classList.remove("loading");
-        }).catch((message) => {
-            alert(message);
-        });
+        setTimeout(function () {
+            createUnityInstance(canvas, config, (progress) => {
+                container.style.setProperty('--loading-percentage', 100 * progress + "%");
+            }).then((unityInstance) => {
+                container.style.setProperty('--loading-percentage', "100%");
+                container.classList.remove("loading");
+            }).catch((message) => {
+                alert(message);
+            });
+        }, 1);
     };
     document.body.appendChild(script);
 </script>
diff --git a/src/Fydar.Dev.WebApp/Components/Pages/Projects/AstralElites.razor b/src/Fydar.Dev.WebApp/Components/Pages/Projects/AstralElites.razor
index 7851789f..857cf126 100644
--- a/src/Fydar.Dev.WebApp/Components/Pages/Projects/AstralElites.razor
+++ b/src/Fydar.Dev.WebApp/Components/Pages/Projects/AstralElites.razor
@@ -37,7 +37,7 @@
             var loaderUrl = "/play/astralelites/build/v0.0.5-rc2.loader.js";
         </script>
 
-        <EmbedUnity class="embed parallax-layer" style="--parallax-multiplier: 0.5">
+        <EmbedUnity class="embed loading parallax-layer" style="--parallax-multiplier: 0.5">
             <Placeholder>
                 <img src="/play/astralelites/favicon.ico" alt="The logo for 'Astral Elites'." style="width: 200px; max-width: 90%; margin-bottom: 32px;" />
             </Placeholder>