Improve user loading experience

FPGAwars · Nov 11, 2024 · 7349e4e · 7349e4e
1 parent 8a2d002
commit 7349e4e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 66 deletions.
diff --git a/app/index.html b/app/index.html
@@ -37,7 +37,7 @@
         <!-- critical css, should be loaded as soon as possible -->
         <style>
 body{
-margin:0;padding:0;s overflow: hidden;
+    margin:0;padding:0;s overflow: hidden;
 }
 /* -- Splash screen  */
 #main-icestudio-load-wrapper {
@@ -62,6 +62,71 @@
         margin: auto;
         width: 100%;
     }
+
+
+
+
+
+    #main-icestudio-load-wrapper--bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 0;
+        height: 24px;
+        animation: progres 3s infinite linear;
+        background-color: white;
+    }
+
+    @keyframes progres {
+        0% {
+            width: 0%;
+        }
+
+        25% {
+            width: 50%;
+        }
+
+        50% {
+            width: 75%;
+        }
+
+        75% {
+            width: 85%;
+        }
+
+        100% {
+            width: 100%;
+        }
+    }
+
+    #main-icestudio-load-wrapper.fade-loaded {
+        opacity: 0;
+
+    }
+
+    #main-icestudio-load-wrapper.loaded {
+        display: none;
+    }
+
+    #main-icestudio-wrapper {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+    }
+    /*
+#main-icestudio-wrapper.loaded {
+    display: block;
+}*/
+
+
+    .splash-img-center,    .splash-img-container{
+        overflow:hidden;
+        width:100%;
+        height:100vh;
+    }
+
     .spinner-wrapper {
         width:100%;
         height:100vh;
@@ -95,11 +160,6 @@
         </style> 
 
 
-        <!-- ************************************************************** -->
-        <!-- ******      Priority Styles                          ********* -->
-        <!-- ************************************************************** -->
-        <!-- Splash screen -->
-        <link rel="stylesheet" href="styles/splash.css" />
 
 
         <!-- ************************************************************** -->

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -228,14 +228,25 @@ function iceSleepMs(ms) {
 async function initAfterLoad() {
     await iceSleepMs(1000); //-- this custom 1s wait smooth the loading screen
 
-    $("#main-icestudio-load-wrapper").addClass("fade-loaded");
-    $("#main-icestudio-wrapper").addClass("loaded");
     angular.element(document).ready(function() {
 
-        $("#main-icestudio-load-wrapper").addClass("loaded");
-        $("#main-icestudio-load-wrapper").removeClass("fade-loaded");
+
+  const observer = new MutationObserver(() => {
+    requestAnimationFrame(() => {
+        $("#main-icestudio-load-wrapper").addClass("fade-loaded");
+        setTimeout(function(){
+            $("#main-icestudio-load-wrapper").addClass("loaded");
+        },500);
         iceStudioReady=true;
+
+        observer.disconnect(); // Detener el observador después de ocultar el splash
     });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+
+          });
 }
 
 //-- Remove loaders when app is fully loaded

diff --git a/app/styles/splash.css b/app/styles/splash.css