Add Slug Parameter to Action Loader for Programmatic Identification (#5490) * feat: add slug parameter to action-loader for programmatic identification Add optional `slug` parameter to ActionLoaderHandle for easier identification via code or CSS. Update all loader.show() calls across the codebase to include descriptive slugs ('app-init', 'chat-rename', 'chat-delete', 'bulk-delete', 'chat-load', 'image-generation', 'legacy-loader'). Add data attributes (data-slug, data-loader-id, data-blocking) to toast content div. Expose slug via getter and make id private with getter. * Apply suggestions from code review Fix slug jsdoc wording Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix: Add identifier to second loader in img gen --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

4df18ccb0bb4ee2a0cf28c6060cb2fdad58f6add

Wolfsblvt <wolfsblvt@gmail.com>

Signed

Parents: e5d4ff5fae3c7568512ddd67f1114a5f21c4376c

public/script.js+3 -0 Viewed

     initLoaderOverlay.appendChild(splashMessage);
     const initLoaderHandle = loader.show({
+        slug: 'app-init',
         toastMode: loader.ToastMode.NONE,
         overlayContent: initLoaderOverlay,
     });

+    }
     const loaderHandle = showLoader ? loader.show({
+        slug: 'chat-rename',
         title: t`Rename Chat`,
         message: t`Renaming chat…`,
         toastMode: loader.ToastMode.STATIC,

         $('#select_chat_cross').trigger('click');
         const loaderHandle = loader.show({
+            slug: 'chat-delete',
             title: t`Delete Chat`,
             message: t`Deleting chat…`,
             toastMode: loader.ToastMode.STATIC,

public/scripts/BulkEditOverlay.js+1 -0 Viewed

                 const deleteChats = checkbox.prop('checked') ?? false;
                 const loaderHandle = loader.show({
+                    slug: 'bulk-delete',
                     title: t`Bulk Delete`,
                     message: t`Deleting ${characterIds.length} character(s)…`,
                     toastMode: loader.ToastMode.STATIC,

public/scripts/action-loader-slashcommands.js+19 -5 Viewed

-import { ActionLoaderToastMode, getActiveLoaderHandles, getLoaderHandleById, hideActionLoader, showActionLoader } from './action-loader.js';
+import { ActionLoaderToastMode, getActiveLoaderHandles, getLoaderHandleById, loader } from './action-loader.js';
 import { t } from './i18n.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandNamedArgument, ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';

                 typeList: [ARGUMENT_TYPE.STRING],
             }),
             SlashCommandNamedArgument.fromProps({
+                name: 'slug',
+                description: 'Unique slug for the loader (to identify it easily via code or CSS)',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: 'slash-wrap',
+            }),
+            SlashCommandNamedArgument.fromProps({
                 name: 'stopTooltip',
                 description: 'Tooltip text for the stop button (only used when toast=stoppable)',
                 typeList: [ARGUMENT_TYPE.STRING],

             const title = args.title ? String(args.title) : '';
             const stopTooltip = String(args.stopTooltip ?? t`Stop`);
-            const loader = showActionLoader({
+            const actionLoader = loader.show({
+                slug: typeof args.slug === 'string' ? String(args.slug) : 'slash-wrap',
                 blocking,
                 toastMode,
                 message,

                 const result = await closureCopy.execute();
                 return result.pipe;
             } finally {
-                await loader.hide();
+                await actionLoader.hide();
+            }
         },
     }));

                 typeList: [ARGUMENT_TYPE.STRING],
             }),
             SlashCommandNamedArgument.fromProps({
+                name: 'slug',
+                description: 'Unique slug for the loader (to identify it easily via code or CSS)',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: 'slash-show',
+            }),
+            SlashCommandNamedArgument.fromProps({
                 name: 'stopTooltip',
                 description: 'Tooltip text for the stop button (only used when toast=stoppable)',
                 typeList: [ARGUMENT_TYPE.STRING],

             const title = args.title ? String(args.title) : '';
             const stopTooltip = String(args.stopTooltip ?? t`Stop`);
-            const handle = showActionLoader({
+            const handle = loader.show({
+                slug: typeof args.slug === 'string' ? String(args.slug) : 'slash-show',
                 blocking,
                 toastMode,
                 message,

+            }
             // No handle provided - hide all active loaders
-            const result = await hideActionLoader();
+            const result = await loader.hide();
             return result ? 'true' : 'false';
         },
     }));

public/scripts/action-loader.js+31 -2 Viewed

  * @typedef {object} ActionLoaderOptions
  * @property {boolean} [blocking=true] - Whether to show the blocking overlay. Set to false for non-blocking toast-only loaders.
  * @property {ActionLoaderToastMode} [toastMode='stoppable'] - Toast display mode
+ * @property {string} [slug=null] - Unique slug for the loader to identify it easily via code or CSS
  * @property {string} [message='Generating...'] - The message to display in the toast
  * @property {string} [title] - Optional title for the toast notification
  * @property {string} [stopTooltip='Stop'] - Tooltip text for the stop button

+    }
     /** @type {string} Unique identifier for this handle */
-    id;
+    #id;
+    /** @type {string|null} Unique slug for the loader */
+    #slug = null;
     /** @type {JQuery<HTMLElement>|null} The toast element for this loader */
     #toast = null;

      * @param {object} options - Configuration options
      * @param {boolean} [options.blocking=true] - Whether to show blocking overlay
      * @param {ActionLoaderToastMode} [options.toastMode] - Toast display mode
+     * @param {string|null} [options.slug] - Unique slug for the loader (to identify it easily via code or CSS)
      * @param {string} [options.message='Generating...'] - Message to display in the toast
      * @param {string} [options.title] - Title for the toast notification
      * @param {string} [options.stopTooltip='Stop'] - Tooltip for the stop button

     constructor({
         blocking = true,
         toastMode = ActionLoaderToastMode.STOPPABLE,
+        slug = null,
         message = t`Generating...`,
         title = '',
         stopTooltip = t`Stop`,

             return;
+        }
-        this.id = generateLoaderId();
+        this.#id = generateLoaderId();
+        this.#slug = slug;
         this.#blocking = blocking;
         this.#onStop = onStop;
         this.#onHide = onHide;

         const toastContent = document.createElement('div');
         toastContent.className = 'action-loader-toast';
+        if (this.#slug) {
+            toastContent.dataset.slug = this.#slug;
+        }
+        toastContent.dataset.loaderId = this.#id;
+        toastContent.dataset.blocking = this.#blocking.toString();
         const messageSpan = document.createElement('span');
         messageSpan.className = 'action-loader-message';
         messageSpan.textContent = message;

+    }
     /**
+     * The unique identifier for this loader handle.
+     * @returns {string}
+     */
+    get id() {
+        return this.#id;
+    }
+    /**
+     * The unique slug for this loader handle, used to identify it easily via code or CSS.
+     * @returns {string|null}
+     */
+    get slug() {
+        return this.#slug;
+    }
+    /**
      * Whether this handle is still active (not disposed).
      * @returns {boolean}
      */

public/scripts/bookmarks.js+1 -0 Viewed

+        }
         const loaderHandle = loader.show({
+            slug: 'chat-load',
             title: t`Chat History`,
             message: t`Loading chat…`,
             toastMode: loader.ToastMode.STATIC,

public/scripts/extensions/stable-diffusion/index.js+2 -0 Viewed

         // Show non-blocking stoppable toast for this generation
         loaderHandle = loader.show({
             blocking: false,
+            slug: `${MODULE_NAME}-image-generation`,
             title: t`Image Generation`,
             message: t`Generating an image...`,
             onStop: stopListener,

         // Show non-blocking stoppable toast for this generation
         loaderHandle = loader.show({
             blocking: false,
+            slug: `${MODULE_NAME}-image-generation`,
             title: t`Image Generation`,
             message: t`Generating an image...`,
             onStop: stopListener,

public/scripts/loader.js+1 -0 Viewed

     // Create a blocking loader with no toast (matches old behavior)
     legacyLoaderHandle = loader.show({
+        slug: 'legacy-loader',
         blocking: true,
         toastMode: loader.ToastMode.NONE,
     });