From 76f00f8947e2e0d52469889a5a8cbb6ab18dcfeb Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:51:21 +0300
Subject: [PATCH] Update ChannelGrid.svelte

---
 src/components/ChannelGrid.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 88e3b72a4..2fbe238c9 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -2,11 +2,19 @@
   import ChannelItem from './ChannelItem.svelte'
 
   export let channels = []
+
+  let limit = 100
+
+  $: channelsDisplay = channels.slice(0, limit)
+
+  function showMore() {
+    limit += 100
+  }
 </script>
 
 <div class="flex flex-col">
   <div class="overflow-y-auto scrollbar-hide">
-    <div class="inline-block min-w-full align-middle overflow-hidden">
+    <div class="inline-block min-w-full align-middle">
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <div class="bg-gray-50 dark:bg-gray-700">
           <div class="flex">
@@ -27,9 +35,15 @@
           </div>
         </div>
         <div class="bg-white dark:bg-gray-800">
-          {#each channels as channel (channel.id)}
+          {#each channelsDisplay as channel (channel.id)}
             <ChannelItem bind:channel />
           {/each}
+          {#if channelsDisplay.length < channels.length}
+            <button
+              class="flex items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
+              on:click={showMore}>Show More</button
+            >
+          {/if}
         </div>
       </div>
     </div>