refactoring

css/main.css

@@ -514,10 +514,10 @@ details[open] > summary .icon {
   padding: 0.8rem;
   border-radius: 0.5rem;
   color: inherit;
-  -webkit-transition: -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform 1s;
-  transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 1s;
-  transition: transform 0.3s;
+  transition: transform 1s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  transition: transform 1s, -webkit-transform 1s;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -683,7 +683,7 @@ strip-option:last-of-type {
 #user_accounts:not(:empty) {
   margin-top: 1.5rem;
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   padding-bottom: 5rem;
 }
 
@@ -807,6 +807,7 @@ strip-option:last-of-type {
   grid-template-columns: minmax(0, 1fr);
 }
 #user_section h4 {
+  height: 1.8rem;
   margin-bottom: 1rem;
 }
 
@@ -818,6 +819,16 @@ strip-option:last-of-type {
   z-index: 2;
 }
 
+#refresh_balance_button.loading {
+  padding: 0.5rem;
+  pointer-events: none;
+  background-color: transparent;
+}
+#refresh_balance_button sm-spinner {
+  --height: 1rem;
+  --width: 1rem;
+}
+
 #account_chart_container {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1182,8 +1193,8 @@ strip-option:last-of-type {
   }
 
   #main_nav {
-    border-radius: 1rem 1rem 0 0;
     background-color: var(--foreground-color);
+    border-top: thin solid rgba(var(--text-color), 0.1);
   }
 
   .nav-item {
@@ -1248,7 +1259,7 @@ strip-option:last-of-type {
     right: 0;
     content: "";
     width: 1px;
-    background-color: rgba(var(--text-color), 0.3);
+    background-color: rgba(var(--text-color), 0.2);
     height: 80%;
   }
 

css/main.scss

@@ -465,7 +465,7 @@ details {
   padding: 0.8rem;
   border-radius: 0.5rem;
   color: inherit;
-  transition: transform 0.3s;
+  transition: transform 1s;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   &--active {
@@ -477,6 +477,7 @@ details {
     }
   }
 }
+
 #main_header {
   grid-area: main-header;
   padding: 1.5rem;
@@ -598,7 +599,7 @@ strip-option {
 #user_accounts:not(:empty) {
   margin-top: 1.5rem;
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   padding-bottom: 5rem;
 }
 .activity-card--account {
@@ -713,6 +714,7 @@ strip-option {
   padding: 1.5rem;
   grid-template-columns: minmax(0, 1fr);
   h4 {
+    height: 1.8rem;
     margin-bottom: 1rem;
   }
 }
@@ -723,6 +725,17 @@ strip-option {
   padding-top: 1.5rem;
   z-index: 2;
 }
+#refresh_balance_button {
+  &.loading {
+    padding: 0.5rem;
+    pointer-events: none;
+    background-color: transparent;
+  }
+  sm-spinner {
+    --height: 1rem;
+    --width: 1rem;
+  }
+}
 
 #account_chart_container {
   display: flex;
@@ -993,8 +1006,8 @@ strip-option {
     padding: 0 1.5rem;
   }
   #main_nav {
-    border-radius: 1rem 1rem 0 0;
     background-color: var(--foreground-color);
+    border-top: thin solid rgba(var(--text-color), 0.1);
   }
   .nav-item {
     flex: 1;
@@ -1041,7 +1054,7 @@ strip-option {
       right: 0;
       content: "";
       width: 1px;
-      background-color: rgba(var(--text-color), 0.3);
+      background-color: rgba(var(--text-color), 0.2);
       height: 80%;
     }
   }

index.html

@@ -19,7 +19,7 @@
 
             //Required for blockchain API operators
             apiURL: {
-                FLO: ['https://livenet.flocha.in/', 'https://flosight.duckdns.org/'],
+                FLO: ['https://flosight.duckdns.org/', 'https://livenet.flocha.in/'],
                 FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
             },
             tokenURL: "https://ranchimallflo.duckdns.org/",
@@ -359,7 +359,7 @@
                         <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
                     </svg>
                     Account summary
-                    <button class="button justify-right" onclick="refreshBalance()">
+                    <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
                         Refresh
                     </button>
                 </h4>
@@ -1205,13 +1205,27 @@
                     }
                 })
         }
-        function refreshBalance() {
+        function refreshBalance(button) {
+            if (button) {
+                button.classList.add('loading')
+                button.innerHTML = `<sm-spinner></sm-spinner>`
+            }
             Promise.all([bank_app.tokenAPI.getBalance(myFloID), floBlockchainAPI.getBalance(myFloID)])
                 .then(([rupeeBalance, floBalance]) => {
                     getRef('rupee_balance').textContent = rupeeBalance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
                     getRef('flo_balance').textContent = floBalance
+                    if (button) {
+                        button.classList.remove('loading')
+                        button.textContent = `Refresh`
+                    }
+                })
+                .catch(error => {
+                    notify(error, 'error')
+                    if (button) {
+                        button.classList.remove('loading')
+                        button.textContent = `Refresh`
+                    }
                 })
-                .catch(error => notify(error, 'error'))
             updateChart()
         }
         function getRequestDetails(requestID) {
@@ -1458,7 +1472,7 @@
         }
 
         document.querySelector('theme-toggle').addEventListener('themechange', e => {
-            if (accountChart) {
+            if (isChartVisible) {
                 accountChart.data.datasets[0].backgroundColor = selectGraphColors()
                 accountChart.update()
             }
@@ -1499,13 +1513,16 @@
             });
         }
 
+        let isChartVisible = false
         const chartObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    refreshBalance()
                     accountChart = renderChart()
+                    refreshBalance()
+                    isChartVisible = true
                 } else if (!entry.isIntersecting && accountChart) {
                     accountChart.destroy()
+                    isChartVisible = false
                 }
             })
         })