Add spinner to indicate profile application

d99dfb91682a07e9fbc4d14ffd140161d83805ef

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/extensions/connection-manager/index.js+54 -1 Viewed

     '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),

         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) {
226	277	try {
227	278	await executeSlashCommandsWithOptions(commandText, { handleParserErrors: false, handleExecutionErrors: false });
228	279	} catch (error) {
229	280	console.warnerror(`Failed to execute command: ${commandText}`, error);
230	281	}
231	282	}
	283	+
	284	+ spinner.stop();
232	285	}
233	286
234	287	/**

public/scripts/extensions/connection-manager/settings.html+3 -2 Viewed

         <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">
 +        <summary>
 -             Profile Details
 +            <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+4 -0 Viewed

 #connection_profile_details ul {
     margin: 5px 0;
+}
++
 +#connection_profile_spinner {
 +    margin-lefT: 5px;
 +}