Better loader UI animation

css/main.css

@@ -192,7 +192,9 @@ button:not(:disabled) {
 }
 
 button:disabled {
-  opacity: 0.5;
+  cursor: not-allowed;
+  filter: saturate(0.5);
+  opacity: 0.8;
 }
 
 ul {
@@ -597,49 +599,25 @@ ul {
 .torrent-card__download-button {
   justify-self: flex-end;
   background-color: rgba(var(--text-color), 0.1);
+  overflow: hidden;
+}
+.torrent-card__download-button[data-collecting]::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateX(calc(-100% + var(--progress, 0%)));
+  height: 0.3rem;
+  background-color: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  transition: all 0.3s;
+  border-radius: 0.5rem;
 }
 .torrent-card__download-button .icon {
-  height: 1.4rem;
   margin-right: 0.5rem;
 }
 
-.progress-indicator {
-  position: relative;
-  justify-self: flex-end;
-  height: 2.3rem;
-  padding: 0 0.6rem;
-}
-
-.progress-percent {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
-  width: 9ch;
-  text-align: right;
-}
-
-.progress-loader,
-.placeholder-loader {
-  fill: none;
-  padding: 0.1rem;
-  stroke-width: 12;
-  overflow: visible;
-}
-
-.progress-loader {
-  stroke-dasharray: 201;
-  stroke-dashoffset: 201;
-  transform: rotate(-90deg);
-  stroke: var(--accent-color);
-  transition: stroke-dashoffset 0.3s;
-  z-index: 1;
-}
-
-.placeholder-loader {
-  position: absolute;
-  stroke: rgba(var(--text-color), 0.1);
-}
-
 .torrent-preview {
   display: grid;
   justify-content: center;
@@ -709,16 +687,24 @@ ul {
   background-color: rgba(var(--text-color), 0.1);
 }
 
-#download_container {
-  display: flex;
-  align-items: center;
-  height: 3rem;
-  margin-top: 2rem;
-}
-
 #torrent_download_button {
-  width: auto;
+  position: relative;
   padding: 1rem;
+  margin-top: 1.5rem;
+  overflow: hidden;
+}
+#torrent_download_button[data-collecting]::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateX(calc(-100% + var(--progress, 0%)));
+  height: 0.3rem;
+  background-color: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  transition: all 0.3s;
+  border-radius: 0.5rem;
 }
 #torrent_download_button .icon {
   margin-right: 0.5rem;
@@ -852,15 +838,10 @@ sm-option {
   .torrent-card__tags, .torrent-card__uploader {
     font-size: 0.7rem;
   }
-  .torrent-card__download-button,
-.torrent-card .progress-indicator {
-    margin-top: 1rem;
-  }
   #torrent_tags {
     font-size: 0.8rem;
   }
-  #torrent_download_button,
+  #torrent_download_button {
-#loader_container {
     width: 100%;
     justify-content: center;
   }

css/main.scss

@@ -167,7 +167,9 @@ button {
 }
 
 button:disabled {
-  opacity: 0.5;
+  cursor: not-allowed;
+  filter: saturate(0.5);
+  opacity: 0.8;
 }
 ul {
   list-style: none;
@@ -522,44 +524,27 @@ ul {
   &__download-button {
     justify-self: flex-end;
     background-color: rgba(var(--text-color), 0.1);
+    overflow: hidden;
+    &[data-collecting] {
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        transform: translateX(calc(-100% + var(--progress, 0%)));
+        height: 0.3rem;
+        background-color: rgba(var(--foreground-color), 1);
+        z-index: 1;
+        transition: all 0.3s;
+        border-radius: 0.5rem;
+      }
+    }
     .icon {
-      height: 1.4rem;
       margin-right: 0.5rem;
     }
   }
 }
-.progress-indicator {
-  position: relative;
-  justify-self: flex-end;
-  height: 2.3rem;
-  padding: 0 0.6rem;
-}
-.progress-percent {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
-  width: 9ch;
-  text-align: right;
-}
-.progress-loader,
-.placeholder-loader {
-  fill: none;
-  padding: 0.1rem;
-  stroke-width: 12;
-  overflow: visible;
-}
-.progress-loader {
-  stroke-dasharray: 201;
-  stroke-dashoffset: 201;
-  transform: rotate(-90deg);
-  stroke: var(--accent-color);
-  transition: stroke-dashoffset 0.3s;
-  z-index: 1;
-}
-.placeholder-loader {
-  position: absolute;
-  stroke: rgba(var(--text-color), 0.1);
-}
 .torrent-preview {
   display: grid;
   justify-content: center;
@@ -621,15 +606,26 @@ ul {
   align-self: flex-start;
   background-color: rgba(var(--text-color), 0.1);
 }
-#download_container {
-  display: flex;
-  align-items: center;
-  height: 3rem;
-  margin-top: 2rem;
-}
 #torrent_download_button {
-  width: auto;
+  position: relative;
   padding: 1rem;
+  margin-top: 1.5rem;
+  overflow: hidden;
+  &[data-collecting] {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      transform: translateX(calc(-100% + var(--progress, 0%)));
+      height: 0.3rem;
+      background-color: rgba(var(--foreground-color), 1);
+      z-index: 1;
+      transition: all 0.3s;
+      border-radius: 0.5rem;
+    }
+  }
   .icon {
     margin-right: 0.5rem;
   }
@@ -753,16 +749,11 @@ sm-option {
     &__uploader {
       font-size: 0.7rem;
     }
-    &__download-button,
-    .progress-indicator {
-      margin-top: 1rem;
-    }
   }
   #torrent_tags {
     font-size: 0.8rem;
   }
-  #torrent_download_button,
+  #torrent_download_button {
-  #loader_container {
     width: 100%;
     justify-content: center;
   }

index.html

@@ -122,19 +122,10 @@
                         </svg>
                         See the index entry in blockchain
                     </a>
-                    <div id="download_container">
+                    <button id="torrent_download_button" class="button button--primary"
-                        <button id="torrent_download_button" class="button button--primary"
+                        onclick="downloadTorrent(currentTorrent.filename, currentTorrent.startTx, currentTorrent.chunks, currentTorrent.id, true)">
-                            onclick="downloadTorrent(currentTorrent.filename, currentTorrent.startTx, currentTorrent.chunks, currentTorrent.id, true)">
+                        Get torrent
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                    </button>
-                                height="24">
-                                <path fill="none" d="M0 0h24v24H0z" />
-                                <path
-                                    d="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z" />
-                            </svg>
-                            Get torrent
-                        </button>
-                        <div id="loader_container" class="flex"></div>
-                    </div>
                 </div>
             </section>
         </section>
@@ -321,11 +312,6 @@
                 <span class="torrent-card__uploader"></span>
             </a>
             <button class="torrent-card__download-button">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z" />
-                </svg>
                 Get torrent
             </button>
         </li>
@@ -406,47 +392,52 @@
                             if (lasttx === undefined) {
                                 lasttx = 0;
                             }
-                            var response = await getResponce(`api/addrs/${addr}/txs`);
+                            try {
-                            var nRequired = response.totalItems - lasttx;
+                                var response = await getResponce(`api/addrs/${addr}/txs`);
-                            console.log(nRequired);
+                                var nRequired = response.totalItems - lasttx;
-                            while (true && nRequired) {
+                                console.log(nRequired);
-                                var response = await getResponce(`api/addrs/${addr}/txs?from=0&to=${nRequired}`);
+                                while (true && nRequired) {
-                                if (nRequired + lasttx != response.totalItems) {
+                                    var response = await getResponce(`api/addrs/${addr}/txs?from=0&to=${nRequired}`);
-                                    nRequired = response.totalItems - lasttx;
+                                    if (nRequired + lasttx != response.totalItems) {
-                                    continue;
+                                        nRequired = response.totalItems - lasttx;
-                                }
+                                        continue;
-                                var errorTxCount = 0; //Count of txs that didnot go into any blocks
-                                response.items.reverse().forEach(function (tx) {
-                                    try {
-                                        if (!tx.blockhash) { //ignore error txs that did not go into any blocks
-                                            errorTxCount += 1;
-                                            return;
-                                        }
-                                        if (addr != tx.vin[0].addr) //ignore if the tx is not from kudos ID
-                                            return
-                                        var kudosData = JSON.parse(tx.floData).FLO_Kudos;
-                                        if (kudosData === undefined)
-                                            return;
-                                        storeTrustedIDs(kudosData).then(function (response) {
-                                        }).catch(function (error) {
-                                        });
-                                    } catch (e) {
-                                        //console.log(e)
                                     }
-                                });
+                                    var errorTxCount = 0; //Count of txs that didnot go into any blocks
-                                var idb2 = indexedDB.open("FLO_Kudos");
+                                    response.items.reverse().forEach(function (tx) {
-                                idb2.onerror = function (event) {
+                                        try {
-                                    console.log("Error in opening IndexedDB!");
+                                            if (!tx.blockhash) { //ignore error txs that did not go into any blocks
-                                };
+                                                errorTxCount += 1;
-                                idb2.onsuccess = function (event) {
+                                                return;
-                                    var dbt = event.target.result;
+                                            }
-                                    var obs = dbt.transaction('lastTx', "readwrite").objectStore('lastTx');
+                                            if (addr != tx.vin[0].addr) //ignore if the tx is not from kudos ID
-                                    obs.put(response.totalItems - errorTxCount, addr);
+                                                return
-                                    dbt.close();
+                                            var kudosData = JSON.parse(tx.floData).FLO_Kudos;
-                                };
+                                            if (kudosData === undefined)
-                                break;
+                                                return;
+                                            storeTrustedIDs(kudosData).then(function (response) {
+                                            }).catch(function (error) {
+                                            });
+                                        } catch (e) {
+                                            //console.log(e)
+                                        }
+                                    });
+                                    var idb2 = indexedDB.open("FLO_Kudos");
+                                    idb2.onerror = function (event) {
+                                        console.log("Error in opening IndexedDB!");
+                                    };
+                                    idb2.onsuccess = function (event) {
+                                        var dbt = event.target.result;
+                                        var obs = dbt.transaction('lastTx', "readwrite").objectStore('lastTx');
+                                        obs.put(response.totalItems - errorTxCount, addr);
+                                        dbt.close();
+                                    };
+                                    break;
+                                }
+                                resolve('retrieved data from API');
+                            } catch (e) {
+                                notify("Error in retrieving data from API", 'error');
+                                console.error(e);
                             }
-                            resolve('retrived data from API');
                         };
                         db.close();
                     };
@@ -647,12 +638,12 @@
                     let percent = Math.round((i / N) * 100);
                     console.log(torrentId)
                     if (fromTorrentPage) {
-                        getRef('loader_container').querySelector('.progress-loader').setAttribute('style', `stroke-dashoffset: ${201 - (2.01 * percent)}`)
+                        getRef('torrent_download_button').style.setProperty('--progress', `${percent}%`)
-                        getRef('loader_container').querySelector('.progress-percent').textContent = `${percent}% done`
+                        getRef('torrent_download_button').textContent = `Collecting... ${percent}%`
                     }
                     else {
-                        getRef(torrentId).querySelector('.progress-loader').setAttribute('style', `stroke-dashoffset: ${201 - (2.01 * percent)}`)
+                        getRef(torrentId).querySelector('.torrent-card__download-button').style.setProperty('--progress', `${percent}%`)
-                        getRef(torrentId).querySelector('.progress-percent').textContent = `${percent}% done`
+                        getRef(torrentId).querySelector('.torrent-card__download-button').textContent = `Collecting... ${percent}%`
                     }
                     // console.log(i, N, percent, floData.next);
                     if (!floData.next)
@@ -672,33 +663,32 @@
         }
         async function downloadTorrent(filename, txid, totalChunks, torrentId, fromTorrentPage = false) {
             console.log(txid);
-            const progressIndicator = create('div', {
-                className: 'progress-indicator flex align-center',
-                innerHTML: `
-                    <svg class="progress-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
-                    <svg class="placeholder-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
-                    <span class="progress-percent">0% done</span>
-                `
-            })
             if (fromTorrentPage) {
-                getRef('torrent_download_button').classList.add('hidden')
+                getRef('torrent_download_button').setAttribute('data-collecting', '')
-                getRef('loader_container').append(progressIndicator)
+                getRef('torrent_download_button').textContent = 'Collecting...'
+                getRef('torrent_download_button').disabled = true;
             }
             else {
-                getRef(torrentId).querySelector('.torrent-card__download-button').classList.add('hidden')
+                getRef(torrentId).querySelector('.torrent-card__download-button').setAttribute('data-collecting', '')
-                getRef(torrentId).append(progressIndicator)
+                getRef(torrentId).querySelector('.torrent-card__download-button').textContent = 'Collecting...'
+                getRef(torrentId).querySelector('.torrent-card__download-button').disabled = true;
             }
             getTorrentMetafromAPI(txid, 1, totalChunks, torrentId, fromTorrentPage).then(chunks => {
                 let filedata = chunks.join("");
                 // console.log(filedata);
                 download(filename, filedata);
                 setTimeout(() => {
-                    progressIndicator.remove()
                     if (fromTorrentPage) {
-                        getRef('torrent_download_button').classList.remove('hidden')
+                        getRef('torrent_download_button').removeAttribute('data-collecting')
+                        getRef('torrent_download_button').textContent = 'Get Torrent'
+                        getRef('torrent_download_button').disabled = false;
+                        getRef('torrent_download_button').style.removeProperty('--progress')
                     }
                     else {
-                        getRef(torrentId).querySelector('.torrent-card__download-button').classList.remove('hidden')
+                        getRef(torrentId).querySelector('.torrent-card__download-button').removeAttribute('data-collecting')
+                        getRef(torrentId).querySelector('.torrent-card__download-button').textContent = 'Get Torrent';
+                        getRef(torrentId).querySelector('.torrent-card__download-button').disabled = false;
+                        getRef(torrentId).querySelector('.torrent-card__download-button').style.removeProperty('--progress')
                     }
                 }, 300);
             }).catch(error => {