Handle big batches of transactions in live-update

Co-authored-by: Stamates <stamates@hotmail.com>

apps/explorer_web/assets/js/pages/address.js

@@ -7,11 +7,13 @@ import { batchChannel } from '../utils'
 router.when('/addresses/:addressHash').then(({ addressHash, blockNumber, filter }) => {
   const channel = socket.channel(`addresses:${addressHash}`, {})
   const $channelDisconnected = $('[data-selector="channel-disconnected-message"]')
+  const $channelBatching = $('[data-selector="channel-batching-message"]')
   channel.join()
     .receive('ok', resp => { console.log('Joined successfully', `addresses:${addressHash}`, resp) })
     .receive('error', resp => { console.log('Unable to join', `addresses:${addressHash}`, resp) })
   channel.onError(() => {
     $channelDisconnected.show()
+    $channelBatching.hide()
   })
 
   if (!blockNumber) {
@@ -23,12 +25,21 @@ router.when('/addresses/:addressHash').then(({ addressHash, blockNumber, filter
     }
 
     const $transactionsList = $('[data-selector="transactions-list"]')
+    const $channelBatchingCount = $('[data-selector="channel-batching-count"]')
+    let batchCountAccumulator = 0
     if ($transactionsList.length) {
       channel.on('transaction', batchChannel((msgs) => {
         if ($channelDisconnected.is(':visible')) {
           return
         }
 
+        if (msgs.length > 10 || batchCountAccumulator > 0) {
+          $channelBatching.show()
+          batchCountAccumulator += msgs.length
+          $channelBatchingCount[0].innerHTML = batchCountAccumulator
+          return
+        }
+
         msgs = humps.camelizeKeys(msgs)
 
         if (filter === 'to') {

apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex

@@ -37,6 +37,9 @@
         </ul>
       </div>
       <div class="card-body">
+        <div data-selector="channel-batching-message" style="display:none;">
+          <span data-selector="channel-batching-count"></span> <%= gettext "more messages have come in" %>
+        </div>
         <div data-selector="channel-disconnected-message" style="display:none;">
           <%= gettext "channel disconnected" %>
         </div>