Added loading animations to home page

navcoin · Aug 19, 2022 · 424f918 · 424f918
1 parent 69aff17
commit 424f918
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 26 deletions.
diff --git a/assets/js/page/Home.js b/assets/js/page/Home.js
@@ -35,6 +35,8 @@ class PageHome {
             })
             nunjucks.render("home/latest-blocks.html", {blocks: data.elements, total: data.pagination.total}, function(err, html) {
                 $('#blocks').html(html)
+                $('#blocks').show()
+                $('#blocks-loader').hide()
             }.bind(this))
         }.bind(this))
 
@@ -57,6 +59,8 @@ class PageHome {
             })
             nunjucks.render("home/latest-txs.html", {txs: data.elements, total: data.pagination.total}, function(err, html) {
                 $('#txs').html(html)
+                $('#txs').show()
+                $('#txs-loader').hide()
             }.bind(this))
         }.bind(this))
 
@@ -92,7 +96,8 @@ class PageHome {
             start[i] = moment(elements[i].start).utc().format('YYYY-MM-DD');
             spend[i] = elements[i].spend;
         }
-        let ctx = document.getElementById("address-groups-chart");
+        let ctx = $("#address-groups-chart");
+        let loader = $("#address-groups-chart-loader");
 
         var options = {
             responsive: true,
@@ -154,7 +159,9 @@ class PageHome {
             data: data,
             options: options,
         });
-        myLineChart.canvas.parentNode.style.height = '300px';
+
+        ctx.show();
+        loader.hide();
     }
 
     populateMarketChart() {
@@ -188,7 +195,9 @@ class PageHome {
             usdPrice[i] = elements[i]['usd'].toFixed(4);
             btcPrice[i] = elements[i]['btc'];
         }
-        let ctx = document.getElementById("market-chart-chart");
+
+        let ctx = $("#market-chart-chart");
+        let loader = $("#market-chart-chart-loader");
 
         // let minAddresses = Math.ceil(Array.min(addresses) / 1.2);
         // let minStaking = Math.ceil(Array.min(spend) / 1.2);
@@ -274,7 +283,9 @@ class PageHome {
             data: data,
             options: options,
         });
-        myLineChart.canvas.parentNode.style.height = '300px';
+
+        ctx.show();
+        loader.hide();
     }
 
     populateTicker() {
@@ -301,4 +312,4 @@ class PageHome {
 
 if ($('body').is('.page-home-index')) {
     new PageHome();
-}
+}
diff --git a/src/Twig/ProposalExtension.php b/src/Twig/ProposalExtension.php
@@ -25,22 +25,22 @@ public function getFunctions(): array
         ];
     }
 
-    public function getLoaderDots() : string
+    public function getLoaderDots(string $size = 'md') : string
     {
         return '<div>
-            <div class="spinner-grow text-nav1" role="status">
+            <div class="spinner-grow spinner-grow-'.$size.' text-nav1" role="status">
               <span class="sr-only">Loading...</span>
             </div>
-            <div class="spinner-grow text-nav2" role="status">
+            <div class="spinner-grow spinner-grow-'.$size.' text-nav2" role="status">
               <span class="sr-only">Loading...</span>
             </div>
-            <div class="spinner-grow text-nav3" role="status">
+            <div class="spinner-grow spinner-grow-'.$size.' text-nav3" role="status">
               <span class="sr-only">Loading...</span>
             </div>
-            <div class="spinner-grow text-nav4" role="status">
+            <div class="spinner-grow spinner-grow-'.$size.' text-nav4" role="status">
               <span class="sr-only">Loading...</span>
             </div>
-            <div class="spinner-grow text-nav5" role="status">
+            <div class="spinner-grow spinner-grow-'.$size.' text-nav5" role="status">
               <span class="sr-only">Loading...</span>
             </div>
           </div>';

diff --git a/templates/home/components/address-groups.html.twig b/templates/home/components/address-groups.html.twig
@@ -1,4 +1,5 @@
 <h2>Active Addresses</h2>
 <div id="address-groups" data-period="daily" data-days="30">
+    <div id="address-groups-chart-loader" class="m-5 text-center">{{ loaderDots() }}</div>
     <canvas id="address-groups-chart"></canvas>
-</div>
+</div>
diff --git a/templates/home/components/hud.html.twig b/templates/home/components/hud.html.twig
@@ -1,54 +1,54 @@
 <div class="row">
     <div class="col-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 margin-top">
-        <h2>Nav&nbsp;in&nbsp;Circulation</h2>
+        <h2>Nav in Circulation</h2>
         <table class="table table-striped table-nav">
             <tr>
                 <th>Public</th>
-                <td class="text-right"><span id="public-supply">----</span></td>
+                <td class="text-right"><span id="public-supply">{{ loaderDots("sm") }}</span></td>
             </tr>
             <tr>
                 <th>Private</th>
-                <td class="text-right"><span id="private-supply">----</span></td>
+                <td class="text-right"><span id="private-supply">{{ loaderDots("sm") }}</span></td>
             </tr>
             <tr>
                 <th>Wrapped</th>
-                <td class="text-right"><span id="wrapped-supply">----</span></td>
+                <td class="text-right"><span id="wrapped-supply">{{ loaderDots("sm") }}</span></td>
             </tr>
         </table>
     </div>
 
     <div class="col-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 margin-top">
-        <h2>Current&nbsp;Price</h2>
+        <h2>Current Price</h2>
         <table class="table table-striped table-nav">
             <tr>
                 <th>BTC</th>
-                <td class="text-right"><span id="ticker-btc">----</span></td>
+                <td class="text-right"><span id="ticker-btc">{{ loaderDots("sm") }}</span></td>
             </tr>
             <tr>
                 <th>USD</th>
-                <td class="text-right"><span id="ticker-usd">----</span></td>
+                <td class="text-right"><span id="ticker-usd">{{ loaderDots("sm") }}</span></td>
             </tr>
             <tr>
-                <th>Market&nbsp;Cap <span id="market-cap-rank"></span></th>
-                <td class="text-right"><span id="market-cap">----</span></td>
+                <th>Market Cap <span id="market-cap-rank"></span></th>
+                <td class="text-right"><span id="market-cap">{{ loaderDots("sm") }}</span></td>
             </tr>
         </table>
     </div>
 
     <div class="col-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 margin-top">
-        <h2>DAO - Community&nbsp;Fund</h2>
+        <h2>DAO - Community Fund</h2>
         <table class="table table-striped table-nav">
             <tr>
                 <th>Available</th>
-                <td class="text-right"><span id="cfund-available">----</span></td>
+                <td class="text-right"><span id="cfund-available">{{ loaderDots("sm") }}</span></td>
             </tr>
             <tr>
                 <th>Locked</th>
-                <td class="text-right"><span id="cfund-locked">----</span></td>
+                <td class="text-right"><span id="cfund-locked">{{ loaderDots("sm") }}</span></td>
             </tr>
             <tr>
                 <th>Spent</th>
-                <td class="text-right"><span id="cfund-spent">----</span></td>
+                <td class="text-right"><span id="cfund-spent">{{ loaderDots("sm") }}</span></td>
             </tr>
         </table>
     </div>

diff --git a/templates/home/components/market-chart.html.twig b/templates/home/components/market-chart.html.twig
@@ -1,4 +1,5 @@
 <h2>Price Chart</h2>
 <div id="market-chart" data-currency="usd" data-days="29">
+    <div id="market-chart-chart-loader" class="m-5 text-center">{{ loaderDots() }}</div>
     <canvas id="market-chart-chart"></canvas>
-</div>
+</div>
diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
@@ -22,10 +22,12 @@
             <div class="row">
                 <div class="col-sm-12 col-md-6 col-lg-6">
                     <h2>Latest Blocks</h2>
+                    <div id="blocks-loader" class="m-5 text-center">{{ loaderDots() }}</div>
                     <div id="blocks" class="zoom"></div>
                 </div>
                 <div class="col-sm-12 col-md-6 col-lg-6">
                     <h2>Latest Transactions</h2>
+                    <div id="txs-loader" class="m-5 text-center">{{ loaderDots() }}</div>
                     <div id="txs" class="zoom" data-parent="#block-collapse"></div>
                 </div>
             </div>