Improvement on startup showing boxes more time

Animation.js

@@ -168,6 +168,7 @@ function newAnimation () {
   }
 
   function clearBrowserCanvas () {
+    if (canWeDraw === false) { return }
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
     browserCanvasContext.clearRect(0, 0, browserCanvas.width, browserCanvas.height)
   }

Canvas.js

@@ -3,7 +3,6 @@ let browserCanvasContext          // The context of the canvas object.
 
 let stepsInitializationCounter = 0         // This counter the initialization steps required to be able to turn off the splash screen.
 let marketInitializationCounter = 0        // This counter the initialization of markets required to be able to turn off the splash screen.
-let splashScreenNeeded = true
 
 function newCanvas () {
   const MODULE_NAME = 'Canvas'
@@ -38,6 +37,7 @@ function newCanvas () {
     panelsSpace: undefined,
     cockpitSpace: undefined,
     designSpace: undefined,
+    splashScreen: undefined,
     animation: undefined,
     mouse: undefined,
     shorcutNumbers: new Map(),
@@ -47,7 +47,6 @@ function newCanvas () {
 
   thisObject.eventHandler = newEventHandler()
 
-  let splashScreen
   let lastContainerMouseOver
   let lastShortcutKeyRejection
 
@@ -87,7 +86,7 @@ function newCanvas () {
       browserCanvas.removeEventListener('keydown', onKeyDown, false)
       browserCanvas.removeEventListener('keyup', onKeyUp, false)
 
-      splashScreen = undefined
+      thisObject.splashScreen = undefined
       lastContainerMouseOver = undefined
 
       hisObject.mouse = undefined
@@ -125,8 +124,7 @@ function newCanvas () {
       thisObject.sideSpace = newSideSpace()
       thisObject.sideSpace.initialize()
 
-      splashScreen = newSplashScreen()
-      splashScreen.initialize()
+      thisObject.splashScreen = newSplashScreen()
 
       let animation = newAnimation()
       animation.initialize()
@@ -149,7 +147,7 @@ function newCanvas () {
       animation.addCallBackFunction('Design Space Draw', thisObject.designSpace.draw)
       animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)
       animation.addCallBackFunction('Side Space Draw', thisObject.sideSpace.draw)
-      animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw)
+      animation.addCallBackFunction('Splash Screen Draw', thisObject.splashScreen.draw)
       animation.start()
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }

DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js

@@ -14,7 +14,7 @@ function newUiObjectsFromNodes () {
 
   return thisObject
 
-  function recreateWorkspace (node, replacingCurrentWorkspace) {
+  function recreateWorkspace (node, replacingCurrentWorkspace, callBackFunction) {
     mapOfNodes = new Map()
     tasksToRun = []
     sessionsToRun = []
@@ -145,6 +145,10 @@ function newUiObjectsFromNodes () {
      // We give a few seconds for the tasks to start
         setTimeout(runSessions, 10000)
       }
+
+      if (callBackFunction !== undefined) {
+        callBackFunction() // The recreation of the workspace is complete
+      }
     }
   }
 
@@ -238,7 +242,7 @@ function newUiObjectsFromNodes () {
             switch (property.type) {
               case 'node': {
                 if (property.name !== previousPropertyName) {
-                  setTimeout(createUiObjectFromNode, 1, node[property.name], node, node, positionOffset)
+                  createUiObjectFromNode(node[property.name], node, node, positionOffset)
                   previousPropertyName = property.name
                 }
               }
@@ -247,7 +251,7 @@ function newUiObjectsFromNodes () {
                 let nodePropertyArray = node[property.name]
                 for (let m = 0; m < nodePropertyArray.length; m++) {
                   let arrayItem = nodePropertyArray[m]
-                  setTimeout(createUiObjectFromNode, 1, arrayItem, node, node, positionOffset)
+                  createUiObjectFromNode(arrayItem, node, node, positionOffset)
                 }
               }
                 break

DesignSpace/Workspace/Workspace.js

@@ -94,23 +94,26 @@ function newWorkspace () {
           if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
             canvas.cockpitSpace.setStatus('Could not load the last Workspace used, called "' + lastUsedWorkspace + '". Will switch to the default Workspace instead.', 500, canvas.cockpitSpace.statusTypes.WARNING)
             thisObject.workspaceNode = getWorkspace() // This is the default workspace that comes with the system.
-            finishInitialization()
+            recreateWorkspace()
             return
           }
           thisObject.workspaceNode = JSON.parse(text)
-          finishInitialization()
+          recreateWorkspace()
         }
       } else {
         thisObject.workspaceNode = getWorkspace() // This is the default workspace that comes with the system.
-        finishInitialization()
+        recreateWorkspace()
+      }
+
+      function recreateWorkspace () {
+        functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode, false, finishInitialization)
       }
 
       function finishInitialization () {
-        functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
         setupEventsServerClients()
         thisObject.enabled = true
         canvas.cockpitSpace.initializePosition()
-
+        canvas.splashScreen.initialize()
         setInterval(saveWorkspace, 60000)
       }
     } catch (err) {

Globals.js

@@ -224,6 +224,8 @@ const TIME_MACHINE_HEIGHT = 8;
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
 let areWeRecording = false
 
+let canWeDraw = false // This global variable regulates when spaces can or can not draw their contents. 
+
 function toRadians(angle) {
     return angle * (Math.PI / 180);
 }

Spaces/ChartingSpace.js

@@ -406,6 +406,7 @@ function newChartingSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (thisObject.visible === false) { return }
     drawBackground()
 

Spaces/CockpitSpace.js

@@ -207,6 +207,7 @@
    }
 
    function draw () {
+     if (canWeDraw === false) { return }
      thisObject.container.frame.draw(false, false)
 
      drawBackground()

Spaces/DesignSpace.js

@@ -334,6 +334,7 @@ function newDesignSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (thisObject.sidePanel !== undefined) {
       thisObject.sidePanel.draw()
     }

Spaces/FloatingSpace.js

@@ -415,6 +415,7 @@ function newFloatingSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (visible === false) { return }
     drawBackground()
     thisObject.floatingLayer.draw()

Spaces/PanelsSpace.js

@@ -336,6 +336,7 @@ function newPanelsSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (thisObject.visible !== true) { return }
 
     thisObject.container.frame.draw(false, false)

Spaces/SideSpace.js

@@ -55,6 +55,7 @@ function newSideSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (isInitialized === false) { return }
     borders()
     thisObject.sidePanelTab.draw()

Spaces/TopSpace.js

@@ -54,6 +54,7 @@ function newTopSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     thisObject.container.frame.draw(false, false)
 
     drawBackground()

SplashScreen.js

@@ -13,7 +13,7 @@ function newSplashScreen () {
     initialize: initialize
   }
 
-  var container = newContainer()
+  let container = newContainer()
   container.initialize()
   thisObject.container = container
 
@@ -31,21 +31,22 @@ function newSplashScreen () {
 
   let logo
   let canDrawLogo = false
+  let isInitialized = false
+  let splashScreenNeeded = true
 
   return thisObject
 
   function initialize () {
     logo = new Image()
-
     logo.onload = onImageLoad
 
     function onImageLoad () {
       canDrawLogo = true
     }
-
     logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
-
     canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+    isInitialized = true
   }
 
   function resize () {
@@ -54,6 +55,7 @@ function newSplashScreen () {
   }
 
   function draw () {
+    if (isInitialized === false) { return }
     if (splashScreenNeeded === false) {
       stepsInitializationCounter = 100
       canDrawLogo = false
@@ -101,6 +103,7 @@ function newSplashScreen () {
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false
+      canWeDraw = true
       stepsInitializationCounter = 99
     }