From a0706fcfc8349264cd33fb84c13df1cab5d5e474 Mon Sep 17 00:00:00 2001 From: Cohee <18619528+Cohee1207@users.noreply.github.com> Date: Tue, 31 Oct 2023 22:16:33 +0200 Subject: [PATCH] Add loader UI component --- public/css/loader.css | 19 +++++++++++++++++++ public/script.js | 6 ++++++ public/scripts/extensions.js | 9 ++++++--- .../extensions/stable-diffusion/index.js | 2 +- public/scripts/loader.js | 12 ++++++++++++ public/style.css | 3 ++- 6 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 public/css/loader.css create mode 100644 public/scripts/loader.js 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 ` -