Add @sveltejs/svelte-virtual-list for ChannelGrid

[SamLeatherdale]

I noticed that there is extreme lag when browsing long country lists such as United States, due to the thousands of channels included.

To remedy this, I have introduced Svelte's virtual list library, which improves the performance massively.

It does add a second level scroll container, instead of having the whole page scroll, which may not be desired.

I also had to move the checkboxes into the row, rather than having them hover outside, as the scroll container seemed to be preventing overflow, even when setting overflow-x: visible

There are a few issues to be ironed out, but I just wanted to check this feature is something you might be interested in, before dedicating too much time to fixing them:

• The height is still 80vh even when there are only a small number of items in the list, which looks odd
• When scrolling with "Download mode" / playlist creator active, the list has a tendency to jump around a bit, which doesn't happen when this mode is not active

[freearhey]

In my scenario of using the site, I first enter a query and then browse through the already filtered list of channels. So in my case there is no lag and the additional level of scrolling will only get in the way.

But maybe others use the site differently and will find these changes more useful.

For those who want to test this version of the site locally, run these two commands in the project folder:

npm install
npm run dev

[BellezaEmporium]

Seems to be a tad bit faster on Windows devices indeed. Maybe the issue isn't Mac-related, but i do see the difference on my side.

However, it doesn't seem to be properly responsive, On my device, I still have a bit to scroll (talking about search results here, I understand why it isn't needed for the main page).

Funnily enough Windows devices (between 7 and 10/11) might not be able to load .sh files (since it's Linux/Mac oriented), so when they're confronted to the post-install method, they can't load it.

(I do not think the load.sh file is useful, knowing that in every case they're still going to be loaded from iptv-org.github.io).

[BellezaEmporium]

Changes work for me, might be even benefic in certain cases. LGTM.

[Alstruit]

Scrollbar appears to be slightly off.

[Alstruit]

Suggested change

	<VirtualList height="80vh" items={channels} let:item>
	<VirtualList height="60vh" items={channels} let:item>

Since the scrollbar exists inside why not remove the outer scroll?

[freearhey]

Although load.sh has nothing to do with this PR, just to clarify. This file loads data not for the main page (it is updated on every visit), but to generate statistic pages for each channel, which happens on a daily basis. This allows us to have fast loading pages without having to render content on the server.

As for the bug when running it on Windows, it was fixed in #2015.

[SamLeatherdale]

Yep, there's still a few issues to fix up, I'm glad there's interest in this PR, so I'm happy to do some more work on it.

I actually think pagination per country might be a better solution than the second level scroll bar:

• Fixes issue of scroll area being too big for a couple items, we can just hide the pagination when there is a few
• doesn't add a second level scroll container
• makes it easier to jump back and forth to specific points in the list vs a long scroll bar

[freearhey]

Another solution might be to put all channels in a single virtual list and group channels by country inside (example: https://virtuoso.dev/grouped-by-first-letter/). In this case we can simply disable the default scrolling.