Merge pull request #378 from cmgustavo/bug/01performance-txs-list

Bug/01performance txs list

app/views/layouts/default.jade

@@ -1,5 +1,5 @@
 doctype
-html(lang='en', data-ng-app='insight')
+html(lang='en', data-ng-app='insight' data-ng-csp)
   include ../includes/head
   body
     #wrap

public/src/css/common.css

@@ -1,5 +1,7 @@
 /* Sticky footer styles
 -------------------------------------------------- */
+@charset "UTF-8";
+
 html,
 body {
   color: #373D42;
@@ -13,6 +15,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: 'Ubuntu', sans-serif;
 }
 
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak,
+.ng-hide {
+  display: none !important;
+}
+
 /* Styling for the ngProgress itself */
 #ngProgress {
   background-color: #6C9032 !important;

public/src/js/filters.js

@@ -1 +1,9 @@
 'use strict';
+
+angular.module('insight')
+  .filter('startFrom', function() {
+    return function(input, start) {
+      start = +start; //parse to int
+      return input.slice(start);
+    }
+});

public/views/address.html

@@ -3,6 +3,10 @@
   <div class="row">
     <div class="col-xs-12 col-gray col-gray-fixed">
       <h1 class="text-center">Address</h1>
+      <div class="m20v text-center text-muted" data-ng-if="!address.addrStr">
+        <span>Loading Address Information...</span>
+     </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="address.addrStr">
         <div class="text-center">
           <qrcode size="160" data="{{address.addrStr}}"></qrcode>
           <h4>{{$root.currency.getConvertion(address.balance)}}</h4>
@@ -14,7 +18,7 @@
         <div class="m20v">
           <h4>Summary</h4>
           <h5>Confirmed</h5>
-        <table class="table">
+          <table class="table ng-cloak" data-ng-hide="!address.addrStr" data-ng-cloak>
             <tbody>
             <tr>
               <td class="small">Total Received</td>
@@ -52,6 +56,7 @@
           </div>
 
         </div> <!-- END OF TRANSACTIONS TABLE -->
+      </div>
       <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div> <!-- END OF COL-MD-3 -->
     <div class="col-xs-12 col-md-9 col-md-offset-3">
@@ -62,3 +67,4 @@
     </div>
   </div> <!-- END OF ROW -->
 </section>
+

public/views/block.html

@@ -3,8 +3,12 @@
   <div class="row">
     <div class="col-xs-12 col-gray col-gray-fixed">
       <h1 class="text-center">Block</h1>
+      <div class="m20v text-center text-muted" data-ng-if="!block.hash">
+        <span>Loading Block...</span>
+     </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="block.hash">
         <div class="block-id">
-        <span class="glyphicon glyphicon-th"></span>
+          <span class="glyphicon glyphicon-list-alt"></span>
           <h2 data-ng-if="block">#{{block.height}}</h2>
         </div>
         <div class="m10v">
@@ -26,12 +30,18 @@
             </tbody>
           </table>
         </div> <!-- END OF TRANSACTIONS TABLE -->
+      </div>
       <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div> <!-- END OF COL-GRAY   -->
 
     <div class="col-xs-12 col-md-9 col-md-offset-3">
       <h2>Summary</h2>
-      <div class="row">
+      <div class="progress progress-striped active" data-ng-if="!block.hash">
+        <div class="progress-bar progress-bar-info" style="width: 100%">
+          <span>Loading Block Details...</span>
+        </div>
+      </div>
+      <div class="row ng-cloak" data-ng-cloak data-ng-if="block.hash">
         <div class="col-md-6">
           <table class="table">
             <tbody>
@@ -106,3 +116,4 @@
   </div>
 
 </section>
+

public/views/block_list.html

@@ -8,20 +8,24 @@
           <h3>Blocks <br> mined on:</h3>
         </div>
       </div>
+      <div class="m20v text-center text-muted" data-ng-if="!pagination.current">
+        <span>Loading Selected Date...</span>
+      </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="pagination.current">
         <p class="lead text-center m20v">
         {{pagination.current}} UTC
         <a href="#" class="btn btn-primary btn-xs" datepicker-popup show-button-bar="false" data-ng-click="openCalendar($event)" data-ng-model="dt" is-open="opened" data-ng-required="true"><span class="glyphicon glyphicon-calendar"></span></a>
         </p>
         <p class="lead text-center m20v"  data-ng-show="loading">&nbsp;</p>
         <p class="text-center m20v"  data-ng-show="pagination.isToday && !loading">Today</p>
-      <p class="text-center m20v"  data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}</p>
+        <p class="text-center m20v"  data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}
         <p class="text-center m20v"  data-ng-show="loading">&nbsp;</p>
-
         <div class="m50v text-center">
           <a class="btn btn-primary" href="/blocks-date/{{pagination.prev}}"><small>&larr; {{pagination.prev}}</small></a>
           <a class="btn btn-primary" href="/blocks-date/{{pagination.next}}" data-ng-show="!pagination.isToday"><small>{{pagination.next}} &rarr;</small></a>
         </div>
       </div>
+    </div>
     <div class="col-xs-12 col-md-9 col-md-offset-3">
       <div class="page-header">
         <h1>
@@ -56,3 +60,4 @@
   </div>
   <h2 class="text-center text-muted" data-ng-show="!blocks.length && !loading">No blocks yet.</h2>
 </section>
+

public/views/transaction.html

@@ -1,10 +1,15 @@
 <div data-ng-include src="'/views/includes/connection.html'"></div>
 <section data-ng-controller="transactionsController" data-ng-init="findThis()">
-<div class="row">
+  
+  <div class="row ng-cloak" data-ng-cloak data-ng-if="tx.txid">
     <div class="col-xs-12 col-gray col-gray-fixed">
       <h1 class="text-center">Transaction</h1>
+      <div class="m20v text-center text-muted" data-ng-if="!tx.txid">
+        <span>Loading Transaction...</span>
+      </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
         <div class="tx-id">
-      <span class="glyphicon glyphicon-transfer"></span>
+          <span class="glyphicon glyphicon-retweet"></span>
         </div>
         <div class="m10v">
           <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
@@ -32,6 +37,7 @@
 
           </tbody>
         </table>
+      </div>
       <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div>
     <div class="col-xs-12 col-md-9 col-md-offset-3">
@@ -39,10 +45,15 @@
         Details
         <small>View information about a bitcoin transaction</small>
       </h2>
-    <div class="block-tx">
+      <div class="progress progress-striped active" data-ng-if="!tx.txid">
+        <div class="progress-bar progress-bar-info" style="width: 100%">
+          <span>Loading Transaction Details...</span>
+        </div>
+      </div>
+      <div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
         <div data-ng-include src="'/views/transaction/tx.html'"></div>
       </div>
-    <div data-ng-show="!tx.isCoinBase">
+      <div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid && !tx.isCoinBase">
         <h2>Inputs and Outputs</h2>
         <table class="table">
           <tbody>
@@ -62,4 +73,6 @@
         </table>
       </div>
     </div>
+  </div>
 </section>
+

public/views/transaction/list.html

@@ -4,6 +4,6 @@
 </div>
 <div class="progress progress-striped active" data-ng-show="loading">
   <div class="progress-bar progress-bar-info" style="width: 100%">
-    <span>Loading...</span>
+    <span>Loading Transactions...</span>
   </div>
 </div>

public/views/transaction/tx.html

@@ -1,4 +1,4 @@
-<div class="line-bot row">
+<div class="line-bot row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
   <div class="col-xs-12 col-md-6">
     <button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
     <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
@@ -18,16 +18,18 @@
 </div>
 <div class="row line-mid">
   <div class="col-md-5">
-    <div class="row" data-ng-show="tx.isCoinBase">
+    <div class="row" data-ng-if="tx.isCoinBase">
       <div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
         <div class="ellipsis">
           <span>No Inputs (Newly Generated Coins)</span>
         </div>
       </div>
     </div>
-    <div class="row" data-ng-show="!tx.isCoinBase">
-      <div data-ng-if="!itemsExpanded">
-      <div data-ng-repeat="vin in tx.vinSimple">
+    <div class="row" data-ng-if="!tx.isCoinBase">
+
+      <!-- Simple view -->
+      <div data-ng-if="!itemsExpanded" data-ng-init="currentInNoExpanded=0; sizeInNoExpanded=5">
+        <div data-ng-repeat="vin in tx.vinSimple| startFrom:currentInNoExpanded*sizeInNoExpanded | limitTo:sizeInNoExpanded">
           <div class="col-md-12 transaction-vin-vout">
             <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
             <div class="ellipsis">
@@ -42,14 +44,19 @@
             </div>
           </div>
         </div>
-      </div><!-- if -->
-      <div 
-      <div data-ng-if="itemsExpanded">
-      <div data-ng-repeat="vin in tx.vin">
+        <div class="showmore_collapse text-center" data-ng-show="tx.vinSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
+          <a href="#" ng-hide="sizeInNoExpanded != tx.vinSimple.length" ng-click="currentInNoExpanded=0; sizeInNoExpanded=5">...less</a>
+          <a href="#" ng-hide="currentInNoExpanded >= tx.vinSimple.length/sizeInNoExpanded - 1" ng-click="currentInNoExpanded=0; sizeInNoExpanded=tx.vinSimple.length">more...</a>
+        </div>
+      </div>
+
+      <!-- Full view -->
+      <div data-ng-if="itemsExpanded" data-ng-init="currentInExpanded=0; sizeInExpanded=5">
+        <div data-ng-repeat="vin in tx.vin| startFrom:currentInExpanded*sizeInExpanded | limitTo:sizeInExpanded">
           <div class="col-md-12 transaction-vin-vout">
             <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
             <div class="ellipsis">
-            <a class="glyphicon glyphicon-chevron-right" href="/#!/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
+              <a class="glyphicon glyphicon-chevron-right" href="/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
               <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
               <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
             </div>
@@ -71,6 +78,10 @@
             </div>
           </div>
         </div>
+        <div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
+          <a href="#" ng-hide="sizeInExpanded != tx.vin.length" ng-click="currentInExpanded=0; sizeInExpanded=5">...less</a>
+          <a href="#" ng-hide="currentInExpanded >= tx.vin.length/sizeInExpanded - 1" ng-click="currentInExpanded=0; sizeInExpanded=tx.vin.length">more...</a>
+        </div>
       </div>
     </div>
   </div>
@@ -82,8 +93,10 @@
   </div>
   <div class="col-md-6">
     <div class="row">
-      <div data-ng-if="!itemsExpanded">
-      <div data-ng-repeat="vout in tx.voutSimple">
+
+      <!-- Simple view -->
+      <div data-ng-if="!itemsExpanded" data-ng-init="currentOutNoExpanded=0; sizeOutNoExpanded=5">
+        <div data-ng-repeat="vout in tx.voutSimple| startFrom:currentOutNoExpanded*sizeOutNoExpanded | limitTo:sizeOutNoExpanded">
           <div class="col-md-12 transaction-vin-vout">
             <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
 
@@ -99,19 +112,23 @@
               <span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
               <a href="/address/{{address}}"  data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
             </div>
-
-
           </div>
         </div>
-      </div><!-- if -->
-      <div data-ng-if="itemsExpanded">
-      <div data-ng-repeat="vout in tx.vout">
+        <div class="showmore_collapse text-center" data-ng-show="tx.voutSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
+          <a href="#" ng-hide="sizeOutNoExpanded != tx.voutSimple.length" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=5">...less</a>
+          <a href="#" ng-hide="currentOutNoExpanded >= tx.voutSimple.length/sizeOutNoExpanded - 1" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=tx.voutSimple.length">more...</a>
+        </div>
+      </div>
+
+      <!-- Full view -->
+      <div data-ng-if="itemsExpanded" data-ng-init="currentOutExpanded=0; sizeOutExpanded=5">
+        <div data-ng-repeat="vout in tx.vout| startFrom:currentOutExpanded*sizeOutExpanded | limitTo:sizeOutExpanded">
           <div class="col-md-12 transaction-vin-vout">
-          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vout.value)}}
-            <span class="text-success" data-ng-show="!vout.spentTxId"  tooltip="Output is unspent" tooltip-placement="left">(U)</span>
-            <a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spentTxId" href="/#!/tx/{{vout.spentTxId}}" title="Spent at: {{vout.spentTxId}},{{vout.spentIndex}}"></a>&nbsp;&nbsp;
+            <div class="text-muted pull-right btc-value">
+              <small>{{$root.currency.getConvertion(vout.value)}}
+                <span class="text-success" data-ng-show="!vout.spendTxId" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
+                <a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spendTxId" href="/tx/{{vout.spendTxId}}" title="Spent at: {{vout.spendTxId}},{{vout.spendIndex}}"></a>&nbsp;&nbsp;
               </small>
-
             </div>
             <div class="ellipsis">
               <a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
@@ -134,11 +151,15 @@
             </div>
           </div>
         </div>
-      </div> <!-- if-->
+        <div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
+          <a href="#" ng-hide="sizeOutExpanded != tx.vout.length" ng-click="currentOutExpanded=0; sizeOutExpanded=5">...less</a>
+          <a href="#" ng-hide="currentOutExpanded >= tx.vout.length/sizeOutExpanded - 1" ng-click="currentOutExpanded=0; sizeOutExpanded=tx.vout.length">more...</a>
         </div>
       </div>
     </div>
-<div class="panel panel-default" data-ng-show="itemsExpanded && tx.blockhash">
+  </div>
+</div>
+<div class="panel panel-default" data-ng-class="{ 'hidden': !itemsExpanded && !tx.blockhash}">
   <div class="panel-body" style="word-wrap:break-word">
     <small>
       <strong>BlockHash</strong>
@@ -147,7 +168,8 @@
     </small>
   </div>
 </div>
-<div class="line-top row">
+
+<div class="line-top row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
   <div class="col-xs-12 col-sm-4 col-md-4">
     <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
   </div>