title: Adding a vocal "Ajax Spinner" to a long-running Alexa Response
body: <p>I'm working on an Alexa skill that sometimes takes a while to respond. Sometimes it is running scripts in the background, turning on a TV, connecting a bluetooth device, etc. etc. A successful response can take up to 20+ seconds once all the automation is completed.</p>
  
  <p>On the web, when there is a long-running request, we are used to seeing a progress bar, or at least an animated spinner with a message telling to please wait, or that the processes is underway. I need something similar for Alexa.</p>
  
  <p>I'd like Alexa to respond TWICE to a SINGLE intent, once before the HTTP request is fired, and one once the response has been received. A sample conversation would be:</p>
  
  <blockquote>
    <p>[User] : Alexa, tell [app name] to switch to theater mode. </p>
    
    <p>[Alexa] : (Immediately) I'm on it! Hang tight.</p>
    
    <p>(...20 seconds later...)</p>
    
    <p>[Alexa] : Done! Theater mode was successfully activated. Enjoy!</p>
  </blockquote>
  
  <p>I've got some code running on lambda here: <a href="http://jsfiddle.net/9gmszmku/embedded/js/" rel="nofollow noreferrer">http://jsfiddle.net/9gmszmku/embedded/js/</a></p>
  
  <p>Excerpt:</p>
  
  <pre><code>    // ================ 
      // [TODO] RESPONSE HERE:  Alexa says: "I'm on it" or "hang on one second..." before getting the response from the http request
      // ================ 
  
      // this request may take many seconds!!!!  Ain't nobody got time for staring at Echo for a response!!!
      var req = http.request(options, (res) =&gt; {
  
        console.log(`STATUS: ${res.statusCode}`);
        console.log(`HEADERS: ${JSON.stringify(res.headers)}`);
  
  
        res.setEncoding('utf8');
        var rawData = '';
        res.on('data', (chunk) =&gt; rawData += chunk);
  
        res.on('end', () =&gt; {
          try {
            var parsedData = JSON.parse(rawData);
            console.log(parsedData);
            context.succeed(generateResponse(buildSpeechletResponse(parsedData.message, true), {}));
          } catch (e) {
            context.succeed(generateResponse(buildSpeechletResponse("Error Parsing", true), {}));
          }
        });
  </code></pre>
  
  <p>Basically, I want to have Alexa respond upfront without closing the session, and again once the function is complete.</p>