feat: lazy loads torrentio results on episodes, adds loading indicator for episodes and movies

assets/controllers/movie_results_controller.js

@@ -13,7 +13,6 @@ export default class extends Controller {
     };
 
     static targets = ['list']
-    static outlets = ['loading-icon']
 
     options = []
     optionsLoaded = false
@@ -28,7 +27,6 @@ export default class extends Controller {
         this.options = this.element.querySelectorAll('tbody tr');
         this.options.forEach((option) => option.querySelector('.download-btn').dataset['title'] = this.titleValue);
         this.resultCountEl.innerText = this.options.length;
-        this.loadingIconOutlet.toggleIcon();
         document.dispatchEvent(new CustomEvent('optionsLoaded', {detail: {options: this.options}}));
     }
 }

assets/controllers/result_filter_controller.js

@@ -22,7 +22,7 @@ export default class extends Controller {
     defaultOptions = '<option value="-">-</option>';
 
     static outlets = ['tv-episode-list']
-    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'loadingIcon', 'selectAll', 'downloadSelected']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'selectAll', 'downloadSelected']
     static values = {
         'imdbId': String,
         'media-type': String,
@@ -32,7 +32,6 @@ export default class extends Controller {
 
     async connect() {
         await this.setInitialFilter();
-        this.setTimerToStopLoadingIcon();
         this.element.filterResults = this.filter.bind(this);
         document.addEventListener('optionsLoaded', this.loadOptions.bind(this));
     }
@@ -48,10 +47,6 @@ export default class extends Controller {
         }
     }
 
-    setTimerToStopLoadingIcon() {
-        setTimeout(() => this.loadingIconTarget.hideIcon(), 10000);
-    }
-
     // Event is fired from movies/tvshows controllers to populate this data
     async loadOptions({detail: { options }}) {
         await options.forEach((option) => {

assets/controllers/tv_results_controller.js

@@ -19,7 +19,6 @@ export default class extends Controller {
     };
 
     static targets = ['list', 'count', 'episodeSelector',]
-    static outlets = ['loading-icon']
 
     options = []
 
@@ -35,6 +34,5 @@ export default class extends Controller {
             this.countTarget.innerText = 0;
             this.episodeSelectorTarget.disabled = true;
         }
-        this.loadingIconOutlet.increaseCount();
     }
 }

templates/components/Filter.html.twig

@@ -44,7 +44,6 @@
                 {{ stimulus_target('result-filter', 'loadingIcon') }}
                 {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
             class="loading-icon">
-            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
         </span>
 
         {% if results.media.mediaType == "tvshows" %}

templates/components/TvEpisodeList.html.twig

@@ -5,7 +5,6 @@
         {% for episode in this.getEpisodes().items %}
             <episode-container id="{{ episode_anchor(episode.seasonNumber, episode.episodeNumber) }}" class="results"
                  show-title="{{ this.title }}"
-                 data-tv-results-loading-icon-outlet=".loading-icon"
                  data-download-button-outlet=".download-btn"
                     {{ stimulus_controller('tv_results', {
                         title: this.title,
@@ -32,7 +31,7 @@
                                 <p>{{ episode.description|truncate }}</p>
                                 <div class="text-xs font-bold">
                                     <button class="results-count-badge py-1 px-1.5 mr-1 grow-0 bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white" title="Click to expand the results table for season {{ episode.seasonNumber }} episode {{ episode.episodeNumber }}.">
-                                        <span class="results-count-number" {{ stimulus_target('tv-results', 'count') }}>-</span> results
+                                        <span class="results-count-number" {{ stimulus_target('tv-results', 'count') }}></span> results
                                     </button>
 
                                     <span class="py-1 px-1.5 mr-1 grow-0 bg-gray-700 rounded-lg text-white" title='"{{ episode.name }}" aired on {{ episode.airDate|date(null, 'UTC') }}.'>
@@ -72,14 +71,16 @@
                             </div>
                         </div>
                         <div class="results-container inline-block overflow-hidden rounded-lg hidden">
-                            <twig:Turbo:Frame id="results_{{ episode_id(episode.seasonNumber, episode.episodeNumber) }}" src="{{ path('app_torrentio_tvshows', {
+                            <twig:Turbo:Frame loading="lazy" id="results_{{ episode_id(episode.seasonNumber, episode.episodeNumber) }}" src="{{ path('app_torrentio_tvshows', {
                                 tmdbId: this.tmdbId,
                                 imdbId: this.imdbId,
                                 season: episode.seasonNumber,
                                 episode: episode.episodeNumber,
                                 target: 'results_' ~ episode_id(episode.seasonNumber, episode.episodeNumber),
                                 block: 'tvshow_results'
-                            }) }}" />
+                            }) }}">
+                                <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
+                            </twig:Turbo:Frame>
                         </div>
                     </div>
             </episode-container>

templates/search/result.html.twig

@@ -125,14 +125,15 @@
                 {% if "movies" == results.media.mediaType %}
                 <movie-container class="results"
                      {{ stimulus_controller('movie_results', {title: results.media.title, tmdbId: results.media.tmdbId, imdbId: results.media.imdbId}) }}
-                     data-movie-results-loading-icon-outlet=".loading-icon"
                 >
                     <twig:Turbo:Frame id="movie_results_frame" src="{{ path('app_torrentio_movies', {
                         tmdbId: results.media.tmdbId,
                         imdbId: results.media.imdbId,
                         target: 'movie_results_frame',
                         block: 'movie_results'
-                    }) }}" />
+                    }) }}">
+                        <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" title="Loading download options for {{ results.media.title }}" />
+                    </twig:Turbo:Frame>
                 </movie-container>
                 {% elseif "tvshows" == results.media.mediaType %}
                     <twig:TvEpisodeList