fixing up text on loading page

jupyterhub · Aug 8, 2019 · a553451 · a553451
1 parent 0757cca
commit a553451
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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>