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>
This commit is contained in:
Wolfsblvt
2026-04-20 21:29:40 +02:00
committed by GitHub
parent e5d4ff5fae
commit 4df18ccb0b
7 changed files with 58 additions and 7 deletions
+19 -5
View File
@@ -1,4 +1,4 @@
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';
@@ -115,6 +115,12 @@ export function registerActionLoaderSlashCommands() {
description: 'Optional title for the toast notification',
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)',
@@ -148,7 +154,8 @@ export function registerActionLoaderSlashCommands() {
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,
@@ -162,7 +169,7 @@ export function registerActionLoaderSlashCommands() {
const result = await closureCopy.execute();
return result.pipe;
} finally {
await loader.hide();
await actionLoader.hide();
}
},
}));
@@ -231,6 +238,12 @@ export function registerActionLoaderSlashCommands() {
description: 'Optional title for the toast notification',
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)',
@@ -258,7 +271,8 @@ export function registerActionLoaderSlashCommands() {
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,
@@ -307,7 +321,7 @@ export function registerActionLoaderSlashCommands() {
}
// No handle provided - hide all active loaders
const result = await hideActionLoader();
const result = await loader.hide();
return result ? 'true' : 'false';
},
}));