delay load by 3 seconds and display spinner

not a final solution
lsteinmann · Feb 21, 2023 · 11cfeaf · 11cfeaf
1 parent acb62eb
commit 11cfeaf
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 56 deletions.
diff --git a/loading.html b/loading.html
@@ -5,62 +5,16 @@
 <title>Loading</title>
 <meta charset="UTF-8">
 <style>
-body {
-    background: #2E3F47;
-    text-align:center;
-    color: #f5f5f5;
-    font-family: Arial, Helvetica, sans-serif;
-}
-.wrap{
-  position: relative;
-  height: 25vh;
-  width: 100vw;
-}
-.midImg{
-  margin: auto;  
-  position: absolute;
-  left:0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  height: 150px;
-  width: 150px;
-}
-a:link {
-  color: #e2001a;
-  background-color: transparent;
-}
-a:visited {
-  color: #e2001a;
-}
-</style>
+  .aligncenter {
+      text-align: center;
+  }
+  </style>
 </head>
 <body>
 
-<!-- Header / Home-->
-<header id="loading">
-  <div>
-    <h1>milQuant</h1>
-    <h2>Quantitative Analysis with Data from Field</h2>
-  </div>
-</header>
-
-<!-- Body / Home-->
-<body>
-    <div>
-        <p>
-            The application is currently loading. 
-        </p>
-    </div>
-    <div class="wrap">
-        <img src="www/quant-icon.png" alt="quantIcon" class="midImg" />
-    </div>
-</body>
-
-<!-- Footer -->
-<footer>
-  <p>Issues, contact and more info at: <a href="https://www.github.com/lsteinmann/milQuant" target="_blank">github.com/lsteinmann/milQuant</a></p>
-</footer>
+  <p class="aligncenter">
+    <img src="www/quant-spinner-smooth.gif" alt="centered image" />
+  </p>
 
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -11,6 +11,8 @@ const port = "3002"
 const child = require('child_process');
 const WINDOWS = "win32"
 
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
 var appPath = path.join(app.getAppPath(), "app.R" )
 // try path.join(__dirname, 'preload.js')
 var execPath = "RScript"
@@ -81,6 +83,7 @@ if (handleSquirrelEvent()) {
 console.log(process.env)
 
 const childProcess = child.spawn(execPath, ["-e", "shiny::runApp(file.path('"+appPath+"'), port="+port+")"])
+
 childProcess.stdout.on('data', (data) => {
   console.log(`stdout:${data}`)
 })
@@ -92,6 +95,12 @@ childProcess.stderr.on('data', (data) => {
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
 
+const delayedLoad = async () => {
+  mainWindow.loadFile('loading.html')
+  await delay(3000);
+  mainWindow.loadURL('http://127.0.0.1:'+port)
+};
+
 
 // Create the browser window.
 function createWindow () {
@@ -100,7 +109,7 @@ function createWindow () {
     // open a windows while loading, with a custom loading screen
     let loading = new BrowserWindow({show: false, frame: false})
     console.log(new Date().toISOString()+'::showing loading');
-    loading.loadFile('loading.html')
+    loading.loadFile('preload.html')
 
     // the actual browser window of the app
     loading.once('show', () => {
@@ -124,8 +133,9 @@ function createWindow () {
 
       })
       console.log(port)
-      // loading shiny url
-      mainWindow.loadURL('http://127.0.0.1:'+port)
+      // loading shiny url, but 3 seconds later to avoid white screen
+      // if the windows loads before shiny is actually ready
+      delayedLoad()
 
       mainWindow.webContents.on('did-finish-load', function() {
         console.log(new Date().toISOString()+'::did-finish-load')

diff --git a/preload.html b/preload.html
@@ -0,0 +1,66 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Loading</title>
+<meta charset="UTF-8">
+<style>
+body {
+    background: #2E3F47;
+    text-align:center;
+    color: #f5f5f5;
+    font-family: Arial, Helvetica, sans-serif;
+}
+.wrap{
+  position: relative;
+  height: 25vh;
+  width: 100vw;
+}
+.midImg{
+  margin: auto;  
+  position: absolute;
+  left:0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 150px;
+  width: 150px;
+}
+a:link {
+  color: #e2001a;
+  background-color: transparent;
+}
+a:visited {
+  color: #e2001a;
+}
+</style>
+</head>
+<body>
+
+<!-- Header / Home-->
+<header id="loading">
+  <div>
+    <h1>milQuant</h1>
+    <h2>Quantitative Analysis with Data from Field</h2>
+  </div>
+</header>
+
+<!-- Body / Home-->
+<body>
+    <div>
+        <p>
+            The application is currently loading. 
+        </p>
+    </div>
+    <div class="wrap">
+        <img src="www/quant-icon.png" alt="quantIcon" class="midImg" />
+    </div>
+</body>
+
+<!-- Footer -->
+<footer>
+  <p>Issues, contact and more info at: <a href="https://www.github.com/lsteinmann/milQuant" target="_blank">github.com/lsteinmann/milQuant</a></p>
+</footer>
+
+</body>
+</html>