Add loader UI component

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

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

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 ? `<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');
 }
 

public/scripts/extensions/stable-diffusion/index.js

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

public/scripts/loader.js

@@ -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();
+}

public/style.css

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