fix progress bar given new api logic

src/css/httpobs.css

@@ -413,3 +413,7 @@ header {
 .text-prewrap {
     white-space: pre-wrap;
 }
+
+#scan-progress {
+    display: none;
+}

src/js/index.js

@@ -92,6 +92,9 @@ const Observatory = {
 
     const successCallback = function f(data) {
       if (data.error !== undefined && data.error !== 'site down') {
+        $('#scan-box').css('display', 'block');
+        $('#scan-progress').css('display', 'none');
+
         // if it's an IP address error, let them click through
         if (data.error === 'invalid-hostname-ip') {
           $('#scan-alert-ip-link').attr('href', window.location.href + 'analyze/' + url.host + '#ssh');
@@ -114,7 +117,7 @@ const Observatory = {
       } else {
         window.location.href = `/analyze/index.html?host=${url.host}&${thirdPartyOpt}`;
       }
-      
+
       return true;
     };
 
@@ -126,6 +129,10 @@ const Observatory = {
       Observatories.TLS.load(rescan, true);
     }
 
+    $('#scan-box').css('display', 'none');
+    $('#scan-progress-bar-text').text('Scan in progress');
+    $('#scan-progress').css('display', 'block');
+
     Observatories.HTTP.submit(url.host, successCallback, Observatories.HTTP.displayError, 'POST', rescan, hidden);
 
     return false;

src/js/observatories/http.js

@@ -38,6 +38,9 @@ const displayError = async (text, statusText) => {
     }
   }
 
+  $('#scan-box').css('display', 'block');
+  $('#scan-progress').css('display', 'none');
+
   $('#scan-alert-text').text(error);
   $('#scan-alert').removeClass('alert-hidden');
   utils.errorResults(error, 'scan');

src/templates/index.html

@@ -6,7 +6,10 @@ <h1 id="whatami" class="h6 margin-bottom">
             The ${require('../js/constants.js').title} has helped <span id="stats-numImprovedSites">over <%= require('../js/constants.js').numImprovedSites %></span> websites by teaching developers, system administrators, and security professionals how to configure their sites safely and securely.
         </h1>
 
-        <div class="card mt-3">
+        <!-- progress bar -->
+        <%= require ('mustache-loader!html-loader?interpolate!./partials/progress-bar.html')({id: 'scan'}) %>
+
+        <div id="scan-box" class="card mt-3">
             <div class="card-header bg-primary text-white"><span class="h3">Scan your site</span></div>
             <div class="card-body no-popover-mobile pb-4">
                 <div class="alert alert-danger alert-hidden" id="scan-alert" role="alert">