Merge pull request #1644 from OpenBazaar/addLoaderToTransactions

Add Spinner to Transactions View

Author: jjeffryes

js/languages/en-US.json

@@ -527,7 +527,10 @@
     "BuyerPaidMessage": "You have paid %{paidAmount} out of %{totalAmount} BTC",
     "BuyerPaidMessageHelp": "To complete your purchase, pay the remaining balance shown above.",
     "SellerPaidMessage": "The buyer has paid %{paidAmount} out of %{totalAmount} BTC",
-    "SellerPaidMessageHelp": "This purchase can not be confirmed until the buyer has completely funded it."
+    "SellerPaidMessageHelp": "This purchase can not be confirmed until the buyer has completely funded it.",
+    "NoPurchases": "No purchases were found.",
+    "NoSales": "No sales were found.",
+    "NoCases": "No cases were found."
   },
   "errorMessages": {
     "saveError": "Data could not be saved.",

js/start.js

@@ -327,10 +327,10 @@ $(window).bind('keydown', function(e) {
       break;
     case window.config.keyShortcuts.refresh:
       e.preventDefault();
-      Backbone.history.loadUrl();
+      app.router.refresh();
       break;
     case window.config.keyShortcuts.restart:
-      app.router.refresh();
+      location.reload();
       break;
     }
 

js/templates/transactions.html

@@ -85,6 +85,12 @@ <h1 class="fancy-heading fontSize20 vCentered colorWhiteForce textShadow"><%= po
           <input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
           <a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
         </div>
+        <div class="padding10 width100 alignCenter js-loadingMsg">
+          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
+        </div>
+        <div class="padding10 width100 alignCenter hide js-emptyMsg">
+          <%= polyglot.t("transactions.NoPurchases") %>
+        </div>
       </div>
 
       <div class="flexRow flex-border positionWrapper js-tabTarg js-sales hide" id="transactionsSales">
@@ -124,6 +130,12 @@ <h1 class="fancy-heading fontSize20 vCentered colorWhiteForce textShadow"><%= po
           <input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
           <a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
         </div>
+        <div class="padding10 width100 alignCenter js-loadingMsg">
+          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
+        </div>
+        <div class="padding10 width100 alignCenter hide js-emptyMsg">
+          <%= polyglot.t("transactions.NoSales") %>
+        </div>
       </div>
 
       <div class="flexRow flex-border positionWrapper hide js-tabTarg js-cases" id="transactionsCases">
@@ -137,6 +149,12 @@ <h1 class="fancy-heading fontSize20 vCentered colorWhiteForce textShadow"><%= po
           <input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
           <a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
         </div>
+        <div class="padding10 width100 alignCenter js-loadingMsg">
+          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
+        </div>
+        <div class="padding10 width100 alignCenter hide js-emptyMsg">
+          <%= polyglot.t("transactions.NoCases") %>
+        </div>
       </div>
 
 </div>

js/views/pageNavVw.js

@@ -27,7 +27,7 @@ module.exports = baseVw.extend({
     'click .js-showSupportModal': 'showSupportModal',
     'click .js-aboutModal .js-tab': 'aboutModalTabClick',
     'click .js-navRefresh': 'navRefreshClick',
-    'click .js-navRestart': 'navRestartClick',
+    //'click .js-navRestart': 'navRestartClick',
     'click .js-navAdminPanel': 'navAdminPanel',
     'click .js-navProfileMenu a': 'closeNav',
     'focus .js-navAddressBar': 'addressBarFocus',

js/views/transactionsVw.js

@@ -311,9 +311,15 @@ module.exports = pageVw.extend({
     });
 
     this.$el.find('.js-'+tabName+'Count').html(tabCollection.length);
-    this.$el.find('.js-'+tabName)
+
+    this.$el.find('.js-' + tabName)
         .append(tabWrapper)
-        .find('.js-unpaidCount').html(tabCollection.where({status: 0}).length);
+        .find('.js-unpaidCount').html(tabCollection.where({status: 0}).length)
+        .end().find('.js-loadingMsg').addClass('hide');
+
+    if (!tabCollection.length) {
+      this.$el.find('.js-'+tabName + ' .js-emptyMsg').removeClass('hide');
+    }
   },
 
   addTransaction: function(model, tabWrapper, type){