Update loading icon (Blockstream#404)

* Update loading icon

* change load to loader, add loading delay to css

Co-authored-by: Adebayo Oriyomi <[email protected]>

Author: adebayooriyomi

client/src/components/loading.js

@@ -0,0 +1,6 @@
+import Snabbdom from 'snabbdom-pragma'
+
+export default (size) => 
+        <div className="spinner">
+            <div className={`ring ${size}`}></div>
+        </div>

client/src/views/addr.js

@@ -5,6 +5,7 @@ import search from './search'
 import { txBox } from './tx'
 import { formatSat, formatNumber } from './util'
 import { addrTxsPerPage as perPage, maxMempoolTxs } from '../const'
+import loader from '../components/loading'
 
 const staticRoot = process.env.STATIC_ROOT || ''
 
@@ -114,12 +115,12 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
           <div className="transactions">
             <h3>{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
             { addrTxs ? addrTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, addr, ...S }))
-                       : <img src="img/Loading.gif" className="loading-delay" /> }
+                       : loader() }
           </div>
 
           <div className="load-more-container">
             <div>
-              { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div><img src="img/Loading.gif" /></div></div>
+              { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
                         : pagingNav(addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
             </div>
           </div>

client/src/views/asset-list.js

@@ -1,6 +1,7 @@
 import Snabbdom from 'snabbdom-pragma'
 import { getSupply } from './util'
 import layout from './layout'
+import loader from '../components/loading'
 
 const staticRoot = process.env.STATIC_ROOT || ''
 export default ({ assetList, goAssetList, loading, t, ...S }) => {
@@ -13,7 +14,7 @@ export default ({ assetList, goAssetList, loading, t, ...S }) => {
   return layout(
     <div>
       <div className="container">
-        { !assets ? <div className="load-more-container"><img src="img/Loading.gif" /></div>
+        { !assets ? <div className="load-more-container">{loader()}</div>
           : !assets.length ? <p>{t`No registered assets`}</p>
           : <div className="assets-table">
             <h3 className="table-title">{t`All Assets`}</h3>

client/src/views/asset.js

@@ -5,6 +5,7 @@ import layout from './layout'
 import search from './search'
 import { txBox } from './tx'
 import { maxMempoolTxs, assetTxsPerPage as perPage, nativeAssetLabel, nativeAssetName } from '../const'
+import loader from '../components/loading'
 
 const staticRoot = process.env.STATIC_ROOT || ''
 
@@ -237,12 +238,12 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
           <div className="transactions">
             <h3>{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
             { assetTxs ? assetTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, ...S }))
-                       : <img src="img/Loading.gif" className="loading-delay" /> }
+                       : loader()}
           </div>
 
           <div className="load-more-container">
             <div>
-              { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div><img src="img/Loading.gif" /></div></div>
+              { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
                         : pagingNav(asset, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
             </div>
           </div>

client/src/views/block.js

@@ -4,6 +4,7 @@ import { txBox } from './tx'
 import { updateQuery } from '../util'
 import { formatTime, formatHex, formatNumber } from './util'
 import { blockTxsPerPage as perPage } from '../const'
+import loader from '../components/loading'
 
 
 const staticRoot = process.env.STATIC_ROOT || ''
@@ -124,12 +125,12 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
       <div className="transactions">
         <h3>{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}</h3>
         { blockTxs ? blockTxs.map(tx => txBox( { ...tx, status: txsStatus }, { openTx, tipHeight, t, spends }))
-                   : <img src="img/Loading.gif" className="loading-delay" /> }
+                   : loader() }
       </div>
 
       <div className="load-more-container">
         <div>
-          { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div><img src="img/Loading.gif" /></div></div>
+          { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
                     : pagingNav(b, { ...S, t }) }
         </div>
       </div>

client/src/views/blocks.js

@@ -1,11 +1,12 @@
 import Snabbdom from 'snabbdom-pragma'
 import { formatTime, formatNumber } from './util'
+import loader from '../components/loading'
 
 const staticRoot = process.env.STATIC_ROOT || ''
 
 export const blks = (blocks, viewMore, loadMore, { t, loading, ...S }) =>
   <div className="block-container">
-  { !blocks ? <img src="img/Loading.gif" className="loading-delay" />
+  { !blocks ? loader()
   : !blocks.length ? <p>{t`No recent blocks`}</p>
   : <div className="blocks-table">
       <h3 className="table-title">{t`Latest Blocks`}</h3>
@@ -36,7 +37,7 @@ export const blks = (blocks, viewMore, loadMore, { t, loading, ...S }) =>
        <div className="load-more-container">
         <div>
         { loading
-        ? <div className="load-more disabled"><span>{t`Load more`}</span><div><img src="img/Loading.gif" /></div></div>
+        ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
         : pagingNav({ ...S, t }) }
         </div>
       </div> 

client/src/views/loading.js

@@ -1,11 +1,10 @@
 import Snabbdom from 'snabbdom-pragma'
 import layout from './layout'
 
+
 export default ({ t, ...S }) => layout(<div>
-  <div className="loading-delay">
-    <div className="container text-center">
-      <h2>{t`Loading...`}</h2>
-      <img src="img/Loading.gif" />
-    </div>
-  </div>
-</div>, { t, ...S })
+    <div className="spinner">
+          <div className="ring"></div>
+          <div className="loading">{t`Loading`}</div>
+      </div>
+    </div>, { t, ...S })

client/src/views/transactions.js

@@ -1,12 +1,13 @@
 
 import Snabbdom from 'snabbdom-pragma'
 import { formatSat, formatNumber } from './util'
+import loader from '../components/loading'
 
 const staticRoot = process.env.STATIC_ROOT || ''
 
 export const transactions = (txs, viewMore, { t } ) => 
     <div className="tx-container">
-      { !txs ? <img src="img/Loading.gif" className="loading-delay" />
+      { !txs ? loader()
       : !txs.length ? <p>{t`No recent transactions`}</p>
       : <div className="transactions-table">
             <h3 className="table-title">{t`Latest Transactions`}</h3>

www/style.css

@@ -160,6 +160,42 @@ a, a:link, a:visited, a:hover, a:focus {
   box-shadow: 0 20px 40px black;
   background-image: radial-gradient(circle at 7% 50%, #1c2127, #15181c 80%);
 }
+
+/** Loading **/
+.spinner{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  visibility: hidden;
+  animation: 0.3s showDelayed;
+  animation-fill-mode: forwards;
+}
+
+.spinner .ring{
+  border: 4px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 4px solid #00ccff;
+  width: 50px;
+  height: 50px;
+  animation: spin .5s linear infinite;
+}
+
+.spinner .small{
+  width: 25px;
+  height: 25px;
+}
+
+.spinner .loading{
+  font-size: 16px;
+  color: white;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 /** New Design Ends **/