From a553451fdd9301bbb941d423eb99e2f4b4d47ff6 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Wed, 7 Aug 2019 18:10:39 -0700
Subject: [PATCH] fixing up text on loading page

---
 binderhub/static/js/index.js     | 23 ++++++++++++++---------
 binderhub/static/loading.css     | 22 ++++++++++++++++++++--
 binderhub/templates/loading.html |  3 ++-
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/binderhub/static/js/index.js b/binderhub/static/js/index.js
index f012095391..8365ec8408 100644
--- a/binderhub/static/js/index.js
+++ b/binderhub/static/js/index.js
@@ -145,13 +145,19 @@ function build(providerSpec, log, path, pathType) {
   update_favicon(BASE_URL + "favicon_building.ico");
   // split provider prefix off of providerSpec
   var spec = providerSpec.slice(providerSpec.indexOf('/') + 1);
-
+  var usual_time = 2000;
   // Update the text of the loading page if it exists
   if ($('div#loader-text').length > 0) {
-    $('div#loader-text p').text("Starting repository: " + spec);
+    $('div#loader-text p.launching').text("Starting repository: " + spec)
+    $('div#loader-text p.launch_info').text("Please be patient while your environment loads.");
+    
+    window.setTimeout(function() {
+      $('div#loader-text p.launch_info').html("Launch may take longer the first few times this environment has been run.")
+    }, usual_time);
+
     window.setTimeout(function() {
-      $('div#loader-text p').html("Repository " + spec + " is taking longer than usual to start, hang tight!")
-    }, 17000);
+      $('div#loader-text p.launch_info').html("Your session is taking longer than usual to start! <a href='https://gitter.im/binder' target='_blank'>Reach out in the Gitter channel to debug</a>")
+    }, usual_time * 4);
   }
 
   $('#build-progress .progress-bar').addClass('hidden');
@@ -187,15 +193,14 @@ function build(providerSpec, log, path, pathType) {
     $('#phase-failed').removeClass('hidden');
 
     $("#loader").addClass("paused");
-    $('div#loader-text p').html("Repository " + spec + " has failed to load!<br />See the logs for details.");
+
+    // If we fail for any reason, show an error message and logs
     update_favicon(BASE_URL + "favicon_fail.ico");
-    // If we fail for any reason, we will show logs!
     log.show();
-
-    // Show error on loading page
     if ($('div#loader-text').length > 0) {
       $('#loader').addClass("error");
-      $('div#loader-text p').html('Error loading ' + spec + '!<br /> See logs below for details.');
+      $('div#loader-text p.launching').html('Error loading ' + spec + '!<br /> See logs below for details.');
+      $('div#loader-text p.launch_info').html("");
     }
     image.close();
   });
diff --git a/binderhub/static/loading.css b/binderhub/static/loading.css
index 134318febf..47540dead1 100644
--- a/binderhub/static/loading.css
+++ b/binderhub/static/loading.css
@@ -75,14 +75,32 @@ https://ihatetomatoes.net for initial code templates.*/
 	padding-top: 100px;
 }
 
+div#loader-text {
+    min-height: 9em;
+}
+
 #loader-text p {
-    font-size: 2em;
     z-index: 1002;
+    max-width: 750px;
     text-align: center;
+    margin: 0px auto 10px auto;
+}
+
+#loader-text p.launching {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+#loader-text p.launch_info {
+    font-size: 1.8em;
+}
+
+div#loader-links {
+    min-height: 6em;
 }
 
 #loader-links p {
-    font-size: 1.5em;
+    font-size: 1.3em;
     text-align: center;
     max-width:700px;
     margin: 0px auto 10px auto;
diff --git a/binderhub/templates/loading.html b/binderhub/templates/loading.html
index 7a7c9d6428..06f70606cc 100644
--- a/binderhub/templates/loading.html
+++ b/binderhub/templates/loading.html
@@ -23,7 +23,8 @@
 {% block main %}
 <div id="loader"></div>
 <div id="loader-text">
-	<p>Loading your Binder...</p>
+  <p class="launching">Launching your Binder...</p>
+  <p class="launch_explanation"></p>
 </div>
 <div id="loader-links">
   <p class="text-center">New to Binder? Check out the <a target="_blank" href="https://mybinder.readthedocs.io/en/latest/">Binder Documentation</a> for more information</p>