feat(EpisodeOptions): loading icon

assets/controllers/loading_icon_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://github.com/symfony/stimulus-bridge#lazy-controllers
+*/
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static values = {
+        total: Number,
+        count: Number,
+    }
+
+    static targets = ['icon']
+
+    connect() {
+
+    }
+
+    toggleIcon() {
+        this.iconTarget.classList.toggle('hidden');
+    }
+
+    increaseCount() {
+        this.countValue += 1;
+        if (this.countValue === this.totalValue) {
+            this.toggleIcon();
+            this.countValue = 0;
+        }
+    }
+}

assets/controllers/tv_results_controller.js

@@ -16,12 +16,15 @@ export default class extends Controller {
 
     static targets = ['list']
 
+    static outlets = ['loading-icon']
+
     connect() {
         if (true === this.activeValue) {
             fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
                 .then(res => res.text())
                 .then(response => {
                     this.element.innerHTML = response;
+                    this.loadingIconOutlet.increaseCount();
                 });
         }
     }

assets/icons/codex/loader.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 6.99998C9.1747 6.99987 6.99997 9.24998 7 12C7.00003 14.55 9.02119 17 12 17C14.7712 17 17 14.75 17 12"><animateTransform attributeName="transform" attributeType="XML" dur="560ms" from="0,12,12" repeatCount="indefinite" to="360,12,12" type="rotate"/></path></svg>

templates/search/result.html.twig

@@ -17,16 +17,24 @@
                             {{ results.media.description }}
                         </p>
                     </div>
+                    <span {{ stimulus_controller('loading_icon', {total: results.media.episodes[1]|length, count: 0}) }}
+                        class="loading-icon"
+                    >
+                        <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" />
+                    </span>
                 </div>
 
                 {% if "movies" == results.media.mediaType %}
-                <div id="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>
+                <div id="results" class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>
                 </div>
                 {% elseif "tvshows" == results.media.mediaType %}
                     {% for season, episodes in results.media.episodes %}
                         {% set active = (season == '1') ? true : false %}
                         {% for episode in episodes %}
-                            <div class="{{ (active == falseg) ? 'hidden' }}" id="results" {{ stimulus_controller('tv_results', {
+                            <div class="{{ (active == false) ? 'hidden' }}"
+                                 data-tv-results-loading-icon-outlet=".loading-icon"
+                                 id="results"
+                                    {{ stimulus_controller('tv_results', {
                                 tmdbId: results.media.tmdbId,
                                 imdbId: results.media.imdbId,
                                 season: season,