From 58ee5e69eb5c44a349b6283dee6bbee530286caf Mon Sep 17 00:00:00 2001
From: RichoM <richi.moran@gmail.com>
Date: Mon, 6 Jul 2020 18:44:09 -0300
Subject: [PATCH] Small change to only show the loading screen if we couldn't
 connect to the server after 500ms

---
 gui/ide/ide.css    | 27 ++++++++++++++-------------
 gui/ide/index.html |  8 ++++++--
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/gui/ide/ide.css b/gui/ide/ide.css
index 70f3c4519..513cd32b7 100644
--- 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
index f37a8b34b..abf0711f2 100644
--- 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();