Add @sveltejs/svelte-virtual-list for ChannelGrid

package-lock.json

@@ -10,6 +10,7 @@
         "@freearhey/search-js": "^0.1.1",
         "@sveltejs/adapter-static": "^2.0.1",
         "@sveltejs/kit": "^1.7.1",
+        "@sveltejs/svelte-virtual-list": "^3.0.1",
         "@tailwindcss/line-clamp": "^0.4.2",
         "@zerodevx/svelte-json-view": "^1.0.2",
         "autoprefixer": "^10.4.2",
@@ -570,6 +571,13 @@
         "vite": "^4.0.0"
       }
     },
+    "node_modules/@sveltejs/svelte-virtual-list": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
+      "integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==",
+      "dev": true,
+      "license": "LIL"
+    },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.2.tgz",
@@ -2629,6 +2637,12 @@
         "undici": "~5.26.2"
       }
     },
+    "@sveltejs/svelte-virtual-list": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
+      "integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==",
+      "dev": true
+    },
     "@sveltejs/vite-plugin-svelte": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "@freearhey/search-js": "^0.1.1",
     "@sveltejs/adapter-static": "^2.0.1",
     "@sveltejs/kit": "^1.7.1",
+    "@sveltejs/svelte-virtual-list": "^3.0.1",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@zerodevx/svelte-json-view": "^1.0.2",
     "autoprefixer": "^10.4.2",
@@ -25,10 +26,10 @@
     "svelte": "^3.44.0",
     "svelte-simple-modal": "^1.3.1",
     "svelte-sitemap": "^2.6.0",
+    "sveltejs-tippy": "^3.0.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.2.7",
     "transliteration": "^2.2.0",
-    "validator": "^13.11.0",
+    "validator": "^13.11.0"
-    "sveltejs-tippy": "^3.0.0"
   }
 }

src/components/ChannelGrid.svelte

@@ -1,4 +1,5 @@
 <script>
+  import VirtualList from '@sveltejs/svelte-virtual-list'
   import ChannelItem from './ChannelItem.svelte'
 
   export let channels = []
@@ -27,9 +28,9 @@
           </div>
         </div>
         <div class="bg-white dark:bg-gray-800">
-          {#each channels as channel (channel.id)}
+          <VirtualList height="80vh" items={channels} let:item>
-            <ChannelItem bind:channel />
+            <ChannelItem channel={item} />
-          {/each}
+          </VirtualList>
         </div>
       </div>
     </div>

src/components/ChannelItem.svelte

@@ -70,17 +70,17 @@
   $: isDisabled = channel.streams === 0
 </script>
 
-{#if $downloadMode}
-  <div
-    transition:fade={{ duration: 200 }}
-    class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
-  >
-    <Checkbox selected={isSelected} disabled={isDisabled} on:change={onCheckboxChange} />
-  </div>
-{/if}
 <div
   class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative"
 >
+  {#if $downloadMode}
+    <div
+      transition:fade={{ duration: 200 }}
+      class="w-14 h-14 shrink-0 flex items-center"
+    >
+      <Checkbox selected={isSelected} disabled={isDisabled} on:change={onCheckboxChange} />
+    </div>
+  {/if}
   <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center">
     <div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden">
       {#if channel.logo}

yarn.lock

@@ -108,6 +108,11 @@
     tiny-glob "^0.2.9"
     undici "~5.26.2"
 
+"@sveltejs/svelte-virtual-list@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz"
+  integrity sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==
+
 "@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
   version "1.0.4"
   resolved "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz"