Add spinner to indicate profile application

public/scripts/extensions/connection-manager/index.js

@@ -49,6 +49,48 @@ const FANCY_NAMES = {
     'tokenizer': 'Tokenizer',
 };
 
+/**
+ * A wrapper for the connection manager spinner.
+ */
+class ConnectionManagerSpinner {
+    /**
+     * @type {AbortController[]}
+     */
+    static abortControllers = [];
+
+    /** @type {HTMLElement} */
+    spinnerElement;
+
+    /** @type {AbortController} */
+    abortController = new AbortController();
+
+    constructor() {
+        // @ts-ignore
+        this.spinnerElement = document.getElementById('connection_profile_spinner');
+        this.abortController =  new AbortController();
+    }
+
+    start() {
+        ConnectionManagerSpinner.abortControllers.push(this.abortController);
+        this.spinnerElement.classList.remove('hidden');
+    }
+
+    stop() {
+        this.spinnerElement.classList.add('hidden');
+    }
+
+    isAborted() {
+        return this.abortController.signal.aborted;
+    }
+
+    static abort() {
+        for (const controller of ConnectionManagerSpinner.abortControllers) {
+            controller.abort();
+        }
+        ConnectionManagerSpinner.abortControllers = [];
+    }
+}
+
 /** @type {() => SlashCommandEnumValue[]} */
 const profilesProvider = () => [
     new SlashCommandEnumValue(NONE),
@@ -214,10 +256,19 @@ async function applyConnectionProfile(profile) {
         return;
     }
 
+    // Abort any ongoing profile application
+    ConnectionManagerSpinner.abort();
+
     const mode = profile.mode;
     const commands = mode === 'cc' ? CC_COMMANDS : TC_COMMANDS;
+    const spinner = new ConnectionManagerSpinner();
+    spinner.start();
 
     for (const command of commands) {
+        if (spinner.isAborted()) {
+            throw new Error('Profile application aborted');
+        }
+
         const argument = profile[command];
         if (!argument) {
             continue;
@@ -226,9 +277,11 @@ async function applyConnectionProfile(profile) {
         try {
             await executeSlashCommandsWithOptions(commandText, { handleParserErrors: false, handleExecutionErrors: false });
         } catch (error) {
-            console.warn(`Failed to execute command: ${commandText}`, error);
+            console.error(`Failed to execute command: ${commandText}`, error);
         }
     }
+
+    spinner.stop();
 }
 
 /**

public/scripts/extensions/connection-manager/settings.html

@@ -13,8 +13,9 @@
         <i id="delete_connection_profile" class="menu_button fa-solid fa-trash-can" title="Delete a connection profile" data-i18n="[title]Delete a connection profile"></i>
     </div>
     <details id="connection_profile_details" class="marginBot10">
-        <summary data-i18n="Profile Details">
-             Profile Details
+        <summary>
+            <span data-i18n="Profile Details">Profile Details</span>
+            <i id="connection_profile_spinner" class="fa-solid fa-spinner fa-spin hidden"></i>
         </summary>
         <div id="connection_profile_details_content" class="marginTop5"></div>
     </details>

public/scripts/extensions/connection-manager/style.css

@@ -7,3 +7,7 @@
 #connection_profile_details ul {
     margin: 5px 0;
 }
+
+#connection_profile_spinner {
+    margin-lefT: 5px;
+}