Fix: Duplicates when click spam loading elements in FT (1/3)

[Shadorc]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

partially addresses #3541 (channel tabs)

Description

There are no safeguards to prevent multiple queries from being sent simultaneously with the same data, which causes duplicate results to be displayed.

Most components already have isLoading bools, but they have side effects on page content. They're designed to detect initial loading rather than any loading state, which is why I opted for a separate variable.

I also chose to hide the button during loading, but we could alternatively disable it with CSS or display a loading icon. It won't make much difference here since the request usually completes too quickly for it to appear, but that won't be the case for the other two fixes.

I considered grouping all three fixes in one MR, but some are more complex and would probably need a separate MR for easier review.

Screenshots

The following video is recorded with a 2s delay applied to each request.
https://github.com/user-attachments/assets/8fe0b174-2cca-402a-90b4-d63a439d821d

Testing

Testing can be simplified by simulating a slow connection. To do this, simply add await new Promise((resolve) => setTimeout(resolve, 2000)) to the Channel#handleFetchMore method after isFetchMoreLoading.value = true

1. Open any channel with enough videos/shorts/playlists to display "Fetch more results"
2. Click very fast on the "Fetch more results" button in any of the tab
3. Check that the button disappears when the results are loading
4. Check that no duplicated videos/shorts/playlists are shown once loaded

Desktop

• OS: Bazzite
• OS Version:
• FreeTube version: 0.24.1-beta