Small change to only show the loading screen if we couldn't connect t…

…o the server after 500ms
GIRA · Jul 6, 2020 · 58ee5e6 · 58ee5e6
1 parent 008e784
commit 58ee5e6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/gui/ide/ide.css b/gui/ide/ide.css
@@ -13,23 +13,24 @@
   }
 
   .bouncing-robot {
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
+    animation-delay: 3s;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
   }
 
   .bounce-6 {
-      animation-name: bounce-6;
-      animation-timing-function: ease;
+    animation-name: bounce-6;
+    animation-timing-function: ease;
   }
 
   @keyframes bounce-6 {
-      0%   { transform: scale(1,1)      translateY(0); }
-      10%  { transform: scale(1.1,.9)   translateY(0); }
-      30%  { transform: scale(.9,1.1)   translateY(-100px); }
-      50%  { transform: scale(1.05,.95) translateY(0); }
-      57%  { transform: scale(1,1)      translateY(-7px); }
-      64%  { transform: scale(1,1)      translateY(0); }
-      100% { transform: scale(1,1)      translateY(0); }
+    0%   { transform: scale(1,1)      translateY(0); }
+    10%  { transform: scale(1.1,.9)   translateY(0); }
+    30%  { transform: scale(.9,1.1)   translateY(-100px); }
+    50%  { transform: scale(1.05,.95) translateY(0); }
+    57%  { transform: scale(1,1)      translateY(-7px); }
+    64%  { transform: scale(1,1)      translateY(0); }
+    100% { transform: scale(1,1)      translateY(0); }
   }
 
   .progress-container {
@@ -53,7 +54,7 @@
   }
 
   .progress-value {
-    animation: load 25s normal forwards;
+    animation: load 25s normal 2s forwards;
     box-shadow: 0 10px 40px -10px #fff;
     border-radius: 100px;
     background: #fff;
@@ -71,7 +72,7 @@
 
   @keyframes load {
     0% { width: 0; }
-    20% { width: 50%; }
+    30% { width: 50%; }
     50% { width: 80%; }
     100% { width: 95%; }
   }

diff --git a/gui/ide/index.html b/gui/ide/index.html
@@ -151,7 +151,7 @@ <h2 class="d-inline">
     </div>
 
     <table id="loading-container"  class="fullscreen dark-theme">
-      <tbody>
+      <tbody style="visibility: hidden">
         <tr>
           <td class="align-middle text-center">
             <img class="bouncing-robot bounce-6" src="robot-1.1s-242px.svg">
@@ -566,13 +566,17 @@ <h5 class="modal-title" lang="en">Configure variables</h5>
     <script src="ajax.js" type="text/javascript"></script>
     <script src="uzi.js" type="text/javascript" ></script>
     <script>
+    function showLoadingScreen() {
+      $("#loading-container tbody").css("visibility", "visible");
+    }
+
     function fullProgressBar() {
       $("#progress-bar").addClass("progress-full").removeClass("progress-value");
     }
 
     $(document).ready(function () {
       i18n.init(TRANSLATIONS);
-
+      setTimeout(showLoadingScreen, 500);
       Uzi.start(location.host ? "" : "localhost:3000").then(function () {
         fullProgressBar();
         IDE.init();