loading improvements

css/main.css

@@ -631,19 +631,22 @@ ul {
   fill: rgba(var(--text-color), 1);
 }
 
-#loader {
-  display: flex;
-  position: relative;
+#main_loader {
   width: 4rem;
   height: 8rem;
+}
+
+.loader {
+  display: flex;
+  position: relative;
   fill: none;
   stroke-width: 4;
   stroke-linecap: round;
   stroke: rgba(var(--text-color), 1);
 }
-#loader polyline:nth-of-type(2),
-#loader polyline:nth-of-type(3),
-#loader polyline:nth-of-type(4) {
+.loader polyline:nth-of-type(2),
+.loader polyline:nth-of-type(3),
+.loader polyline:nth-of-type(4) {
   stroke-dasharray: 60;
   -webkit-animation: loading infinite 1s;
           animation: loading infinite 1s;
@@ -817,6 +820,12 @@ sm-option {
   gap: 1rem;
   align-content: flex-start;
 }
+#bond_list .loader {
+  height: 2rem;
+  width: 2rem;
+  justify-self: center;
+  margin-top: 4vw;
+}
 
 .bond-transaction {
   display: grid;

css/main.scss

@@ -503,12 +503,13 @@ ul {
   height: 2rem;
   fill: rgba(var(--text-color), 1);
 }
-
-#loader {
-  display: flex;
-  position: relative;
+#main_loader {
   width: 4rem;
   height: 8rem;
+}
+.loader {
+  display: flex;
+  position: relative;
   fill: none;
   stroke-width: 4;
   stroke-linecap: round;
@@ -668,6 +669,12 @@ sm-option {
   display: grid;
   gap: 1rem;
   align-content: flex-start;
+  .loader {
+    height: 2rem;
+    width: 2rem;
+    justify-self: center;
+    margin-top: 4vw;
+  }
 }
 
 .bond-transaction {

index.html

@@ -46,7 +46,7 @@
     <sm-notifications id="notification_drawer"></sm-notifications>
     <article id="loading_page" class="page">
         <h3 class="h3">Bitcoin Bonds</h3>
-        <svg id="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+        <svg id="main_loader" class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
             <polygon points="17.76 23.78 17.76 40.22 32 48.44 46.24 40.22 46.24 23.78 32 15.56 17.76 23.78" />
             <polyline points="17.76 23.78 32 32 46.24 23.78" />
             <line x1="32" y1="48.44" x2="32" y2="32" />
@@ -864,7 +864,6 @@
             }
 
             const renderedBonds = []
-
             for (let i in data) {
                 // console.log(i)
                 let b = blockchainBond.parse.main(data[i]);
@@ -994,12 +993,13 @@
                 console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`);
                 getRef("usd-rate").textContent = `USD: ₹${rates.USD_INR.toFixed(2)}`;
                 getRef("btc-usd-rate").textContent = `BTC: ${formatAmount(rates.BTC_USD)}`;
+                showPage('home_page')
+                renderElem(getRef('bond_list'), html`<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <polygon points="17.76 23.78 17.76 40.22 32 48.44 46.24 40.22 46.24 23.78 32 15.56 17.76 23.78" /> <polyline points="17.76 23.78 32 32 46.24 23.78" /> <line x1="32" y1="48.44" x2="32" y2="32" /> <polyline points="32 2 6.02 17 6.02 47" /> <polyline points="57.98 47 57.98 17 32 2" /> <polyline points="6.02 47 32 62 57.98 47" /> </svg>`)
                 refreshBlockchainData().then(result => {
                     compactIDB.readAllData("bonds").then(result => {
                         renderBondData(result);
                         compactIDB.readAllData('closings').then(result => {
                             renderBondClosingData(result);
-                            showPage('home_page')
                         }).catch(error => console.error(error))
                     }).catch(error => console.error(error))
                 }).catch(error => {
@@ -1037,7 +1037,6 @@
                 }).catch(error => reject(error))
             }
         })
-
     </script>
 </body>