Add loader UI component

This commit is contained in:
Cohee 2023-10-31 22:16:33 +02:00
parent eb4e90c589
commit a0706fcfc8
6 changed files with 46 additions and 5 deletions

19
public/css/loader.css Normal file
View File

@ -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;
}

View File

@ -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() {

View File

@ -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 ? `<p>${DOMPurify.sanitize(modules.join(', '))}</p>` : '<p class="failure">Not connected to the API!</p>';
return `
<h3>Modules provided by your Extensions API:</h3>
<h3>Modules provided by your Extras API:</h3>
${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 = '<h3>Default Extensions:</h3>';
let htmlExternal = '<h3>External Extensions:</h3>';
showLoader();
let htmlDefault = '<h3>Built-in Extensions:</h3>';
let htmlExternal = '<h3>Installed Extensions:</h3>';
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(`<div class="extensions_info">${html}</div>`, 'text');
}

View File

@ -306,7 +306,7 @@ function addPromptTemplates() {
const textarea = $('<textarea></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();

12
public/scripts/loader.js Normal file
View File

@ -0,0 +1,12 @@
const ELEMENT_ID = 'loader';
export function showLoader() {
const container = $('<div></div>').attr('id', ELEMENT_ID);
const loader = $('<div></div>').addClass('fa-solid fa-spinner fa-spin fa-3x');
container.append(loader);
$('body').append(container);
}
export function hideLoader() {
$(`#${ELEMENT_ID}`).remove();
}

View File

@ -1,6 +1,7 @@
@charset "UTF-8";
@import url(css/promptmanager.css);
@import url(css/loader.css);
:root {
--doc-height: 100%;