adding a loading spinner to the map transition

Author: rmisio

js/templates/buyWizard.html

@@ -5,9 +5,9 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
     </div>
     <div class="modal-hero js-buyWizardHero custCol-text shadow-inner1-light noOverflow"
          style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= ob.vendor_offer.listing.item.image_hashes[0] %><%= ob.imageExtension %>), url(imgs/defaultBanner.png);">
-      <div class="js-buyWizardMap positionTop buyWizardMap hide">
-        <div class="flexContainer">
-        </div>
+      <div class="js-buyWizardMap positionRelative hide" style="height: 262px">
+        <div class="txt-col1 ion-android-sync spinner spinner-slow icon-large icon-circle-background1 zIndex1 fullCentered hide" style="border: 1px solid #aaa;"></div>
+        <div class="flexContainer"></div>
       </div>
       <div class="modal-hero modal-heroFullHeightNoButtons js-buyWizardSpinner hide background1 custCol-primary">
         <div class="width100 txt-center vCentered">

js/views/buyWizardVw.js

@@ -388,17 +388,20 @@ module.exports = baseVw.extend({
     $iFrame = $('<iframe class="js-buyWizardMap js-iframe-pending positionTop" width="525" height="350" frameborder="0" style="border:0; margin-top: 0; height: 262px" />');
 
     if ($currentIframe.length) {
+      this.$buyWizardMap.find('.spinner').removeClass('hide');
       $iFrame.insertBefore($currentIframe);
     } else {
       this.$buyWizardMap.find('.flexContainer')
         .prepend($iFrame);
     }
 
     $iFrame.on('load', () => {
+      this.$buyWizardMap.find('.spinner').addClass('hide');
+      
       $currentIframe.addClass('js-iframe-leaving')
         .fadeOut({
           duration: 'slow',
-          complete: function() {
+          complete: () => {
             $currentIframe.remove();
           }
         });