feat: add loader to transactions section of homepage (#908)

This PR adds a loader to the ledger details displayed on the homepage,
for when the transaction info takes a bit longer to load. It also adds a
Σ to the total fees in the ledger, so it's clearer that it's not the
average or base fee.

### Context of Change

With the heavy load happening right now, some ledgers take a second or
two to load all of the transactions. This makes it clearer that there
isn't anything that's broken.

src/containers/Ledgers/LedgerMetrics.jsx

@@ -84,7 +84,7 @@ class LedgerMetrics extends Component {
           content = renderXRP(data[key], language)
         } else if (key === 'ledger_interval' && data[key] !== '--') {
           content = `${data[key]} ${t('seconds_short')}`
-        } else if (key === 'nUnl' && data[key].length === 0) {
+        } else if (key === 'nUnl' && data[key]?.length === 0) {
           return null
         } else if (key === 'nUnl') {
           content = data[key].length

src/containers/Ledgers/Ledgers.jsx

@@ -15,6 +15,8 @@ import { Legend } from './Legend'
 import { RouteLink } from '../shared/routing'
 import { LEDGER_ROUTE, TRANSACTION_ROUTE, VALIDATOR_ROUTE } from '../App/routes'
 
+const SIGMA = '\u03A3'
+
 class Ledgers extends Component {
   constructor(props) {
     super(props)
@@ -98,6 +100,7 @@ class Ledgers extends Component {
           <div className="close-time">{time}</div>
           {this.renderTxnCount(ledger.txn_count)}
           {this.renderFees(ledger.total_fees)}
+          {ledger.transactions == null && <Loader />}
           <div className="transactions">
             {transactions.map(this.renderTransaction)}
           </div>
@@ -137,7 +140,7 @@ class Ledgers extends Component {
     const amount = localizeNumber(d, language, options)
     return d !== undefined ? (
       <div className="fees">
-        {t('fees')}:<b>{amount}</b>
+        {SIGMA} {t('fees')}:<b>{amount}</b>
       </div>
     ) : null
   }

src/containers/Ledgers/css/ledgers.scss

@@ -90,6 +90,11 @@ $ledger-width: 196px;
       width: 0;
       height: 0;
     }
+
+    .loader {
+      position: relative;
+      padding: 32px;
+    }
   }
 
   .ledger {

src/containers/shared/components/Streams.jsx

@@ -102,7 +102,10 @@ export const fetchNegativeUNL = async (rippledSocket) =>
 
       return data
     })
-    .catch((e) => Log.error(e))
+    .catch((e) => {
+      Log.error(e)
+      return []
+    })
 
 export const fetchQuorum = async (rippledSocket) =>
   getQuorum(rippledSocket)