diff --git a/public/css/loader.css b/public/css/loader.css new file mode 100644 index 000000000..eb5087d06 --- /dev/null +++ b/public/css/loader.css @@ -0,0 +1,19 @@ +#loader { + position: fixed; + margin: 0; + padding: 0; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 999999; + width: 100vw; + height: 100vh; + width: 100svw; + height: 100svh; + background-color: var(--SmartThemeBlurTintColor); + color: val(--SmartThemeBodyColor); + opacity: 0.7; + transition: 500ms; +} diff --git a/public/script.js b/public/script.js index 9c28429d5..b35ab71a6 100644 --- a/public/script.js +++ b/public/script.js @@ -185,6 +185,7 @@ import { applyLocale } from "./scripts/i18n.js"; import { getTokenCount, getTokenizerModel, initTokenizers, saveTokenCache } from "./scripts/tokenizers.js"; import { initPersonas, selectCurrentPersona, setPersonaDescription } from "./scripts/personas.js"; import { getBackgrounds, initBackgrounds } from "./scripts/backgrounds.js"; +import { hideLoader, showLoader } from "./scripts/loader.js"; //exporting functions and vars for mods export { @@ -258,6 +259,9 @@ export { countOccurrences } +// Cohee: Uncomment when we decide to use loader +// showLoader(); + // Allow target="_blank" in links DOMPurify.addHook('afterSanitizeAttributes', function (node) { if ('target' in node) { @@ -729,6 +733,8 @@ async function firstLoadInit() { initStats(); initCfg(); doDailyExtensionUpdatesCheck(); + // Cohee: Uncomment when we decide to use loader + // hideLoader(); } function checkOnlineStatus() { diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js index ab8ba6e12..a59a95168 100644 --- a/public/scripts/extensions.js +++ b/public/scripts/extensions.js @@ -1,4 +1,5 @@ import { callPopup, eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, substituteParams, renderTemplate } from "../script.js"; +import { hideLoader, showLoader } from "./loader.js"; import { isSubsetOf } from "./utils.js"; export { getContext, @@ -579,7 +580,7 @@ async function getExtensionData(extension) { function getModuleInformation() { let moduleInfo = modules.length ? `

${DOMPurify.sanitize(modules.join(', '))}

` : '

Not connected to the API!

'; return ` -

Modules provided by your Extensions API:

+

Modules provided by your Extras API:

${moduleInfo} `; } @@ -588,8 +589,9 @@ function getModuleInformation() { * Generates the HTML strings for all extensions and displays them in a popup. */ async function showExtensionsDetails() { - let htmlDefault = '

Default Extensions:

'; - let htmlExternal = '

External Extensions:

'; + showLoader(); + let htmlDefault = '

Built-in Extensions:

'; + let htmlExternal = '

Installed Extensions:

'; const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order); const promises = []; @@ -616,6 +618,7 @@ async function showExtensionsDetails() { ${htmlDefault} ${htmlExternal} `; + hideLoader(); callPopup(`
${html}
`, 'text'); } diff --git a/public/scripts/extensions/stable-diffusion/index.js b/public/scripts/extensions/stable-diffusion/index.js index a8d2b2b96..cc9e763c1 100644 --- a/public/scripts/extensions/stable-diffusion/index.js +++ b/public/scripts/extensions/stable-diffusion/index.js @@ -306,7 +306,7 @@ function addPromptTemplates() { const textarea = $('') .addClass('textarea_compact text_pole') .attr('id', `sd_prompt_${name}`) - .attr('rows', 6) + .attr('rows', 3) .val(prompt).on('input', () => { extension_settings.sd.prompts[name] = textarea.val(); saveSettingsDebounced(); diff --git a/public/scripts/loader.js b/public/scripts/loader.js new file mode 100644 index 000000000..914b08ef5 --- /dev/null +++ b/public/scripts/loader.js @@ -0,0 +1,12 @@ +const ELEMENT_ID = 'loader'; + +export function showLoader() { + const container = $('
').attr('id', ELEMENT_ID); + const loader = $('
').addClass('fa-solid fa-spinner fa-spin fa-3x'); + container.append(loader); + $('body').append(container); +} + +export function hideLoader() { + $(`#${ELEMENT_ID}`).remove(); +} diff --git a/public/style.css b/public/style.css index a9ae7c426..6dd49a234 100644 --- a/public/style.css +++ b/public/style.css @@ -1,6 +1,7 @@ @charset "UTF-8"; @import url(css/promptmanager.css); +@import url(css/loader.css); :root { --doc-height: 100%; @@ -3620,4 +3621,4 @@ a { height: 100vh; z-index: 9999; } -} \ No newline at end of file +}