UI update

components.js

@@ -1640,16 +1640,16 @@ stripSelect.innerHTML = `
     .cover{
         position: absolute;
         z-index: 1;
-        width: 4rem;
+        width: 5rem;
         height: 100%;
         pointer-events: none;
     }
     .cover--left{
-        background: linear-gradient(90deg, var(--background-color), transparent);
+        background: linear-gradient(90deg, var(--background-color) 60%, transparent);
     }
     .cover--right{
         right: 0;
-        background: linear-gradient(90deg, transparent, var(--background-color));
+        background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
     }
     .nav-button--right::before{
         background-color: red;

css/main.css

@@ -403,6 +403,24 @@ ul {
   width: 3rem;
 }
 
+.app-icon-loader {
+  fill: none;
+  stroke-width: 2;
+  justify-self: center;
+  stroke-dasharray: 202;
+  margin: 2rem 0;
+  stroke: rgba(var(--text-color), 1);
+  animation: stroke-anim 2s infinite alternate;
+}
+
+@keyframes stroke-anim {
+  0% {
+    stroke-dashoffset: 202;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
 .app-name {
   font-weight: 500;
   margin-bottom: 1rem;

css/main.scss

@@ -346,6 +346,24 @@ ul{
     height: 3rem;
     width: 3rem;
 }
+
+.app-icon-loader{
+    fill: none;
+    stroke-width: 2;
+    justify-self: center;
+    stroke-dasharray: 202;
+    margin: 2rem 0;
+    stroke: rgba(var(--text-color), 1);
+    animation: stroke-anim 2s infinite alternate;
+}
+@keyframes stroke-anim {
+    0%{
+        stroke-dashoffset: 202;
+    }
+    100%{
+        stroke-dashoffset: 0;
+    }
+}
 .app-name{
     font-weight: 500;
     margin-bottom: 1rem;

index.html

@@ -82,7 +82,14 @@
                         Browse
                     </a>
                 </div>
-                <section id="torrent_container" class="torrent-container"></section>
+                <section id="torrent_container" class="torrent-container">
+                    <svg class="app-icon icon app-icon-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <path
+                            d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z" />
+                        <path
+                            d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z" />
+                    </svg>
+                </section>
             </section>
         </section>
         <section id="torrent" class="page hide-completely page-layout">
@@ -896,18 +903,17 @@
             })
             return torrentsFrag
         }
-        async function showLatestTorrents() {
+        function showLatestTorrents() {
-            // load data from IDB first
-            let allTorrents = await getDataFromIDB()
-            allTorrents = allTorrents.reverse().slice(0, 8)
-            getRef('torrent_container').innerHTML = ``
-            getRef('torrent_container').append(renderTorrents(allTorrents))
-            
             // render latest torrent when available
-            allTorrents = await getTorrents()
+            getTorrents().then(allTorrents => {
-            allTorrents = allTorrents.reverse().slice(0, 8)
+                allTorrents = allTorrents.reverse().slice(0, 8)
-            getRef('torrent_container').innerHTML = ``
+                getRef('torrent_container').innerHTML = ``
-            getRef('torrent_container').append(renderTorrents(allTorrents))
+                getRef('torrent_container').append(renderTorrents(allTorrents))
+            })
+            .catch(err => {
+                console.log(err)
+            })
+            
         }
 
         function getSearchParams() {