Add loader UI component

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