Add loading animation when clicking on a season

With ffmpeg thumbnails enabled, clicking on a season makes a call to
check whether all episode files exist, which can be slow depending on
where the files are stored. Add a loading icon after clicking on a
season to let the user know something's happening.

The real fix is to make the thumbnail check async, or call it when the
episode itself is clicked and block it there, but this is a decent
workaround that is helpful in the case of a slow server anyway.

Client/Script/ButtonCreator.js

@@ -58,6 +58,22 @@ class ButtonCreator {
         return appendChildren(button, buildNode('span', { class : 'buttonText' }, text));
     }
 
+    /**
+     * Return a loading icon animation. Doesn't belong here, since we don't wrap
+     * this in our button logic, returning a "raw" image.
+     * @param {number} size
+     * @param {string} color */
+    static loadingIcon(size=20, attributes={}, color='standard') {
+        return buildNode('img', {
+            width : size,
+            height : size,
+            theme : color,
+            src : ThemeColors.getIcon('loading', color),
+            alt : 'Loading',
+            ...attributes
+        });
+    }
+
     /**
      * Sets the text of the given button.
      * @param {HTMLElement} button

Client/Script/ResultRow.js

@@ -888,10 +888,15 @@ class SeasonResultRow extends ResultRow {
     /** Make a request for all episodes in this season. */
     async #getEpisodes() {
         const season = this.season();
+        const stats = $$('.showResultEpisodes', this.html());
+        const load = stats ? ButtonCreator.loadingIcon(18, { class : 'inlineLoadingIcon' }) : null;
         try {
+            stats?.insertBefore(load, stats.firstChild);
             await this.#parseEpisodes(await ServerCommand.getEpisodes(season.metadataId));
         } catch (err) {
             errorResponseOverlay(`Something went wrong when retrieving the episodes for ${season.title}.`, err);
+        } finally {
+            stats?.removeChild(load);
         }
     }
 

Client/Style/style.css

@@ -509,6 +509,11 @@ input:focus-visible {
   padding-bottom: 10px;
 }
 
+.inlineLoadingIcon {
+  margin-right: 10px;
+  vertical-align: bottom;
+}
+
 #chapterZone select {
   max-width: 250px; /** Don't get too crazy with extremely long episode/chapter titles */
 }