From 158ac08c617dd36a7b9b7ea79e8d9259e5074962 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Tue, 22 Apr 2025 00:28:33 -0500
Subject: [PATCH] feat(EpisodeOptions): loading icon

---
 assets/controllers/loading_icon_controller.js | 31 +++++++++++++++++++
 assets/controllers/tv_results_controller.js   |  3 ++
 assets/icons/codex/loader.svg                 |  1 +
 templates/search/result.html.twig             | 12 +++++--
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 assets/controllers/loading_icon_controller.js
 create mode 100644 assets/icons/codex/loader.svg

diff --git a/assets/controllers/loading_icon_controller.js b/assets/controllers/loading_icon_controller.js
new file mode 100644
index 0000000..b803c3f
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/assets/controllers/tv_results_controller.js b/assets/controllers/tv_results_controller.js
index 2d8ffd7..3ff1cbd 100644
--- a/assets/controllers/tv_results_controller.js
+++ b/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();
                 });
         }
     }
diff --git a/assets/icons/codex/loader.svg b/assets/icons/codex/loader.svg
new file mode 100644
index 0000000..a992b56
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/search/result.html.twig b/templates/search/result.html.twig
index 66f9f4e..8048a97 100644
--- a/templates/search/result.html.twig
+++ b/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,