Display loader earlier, init toast classes in power-user

public/script.js

@@ -313,8 +313,6 @@ await new Promise((resolve) => {
     }
 });
 
-//showLoader(); <-- must wait for poweruser (called from firstinit()), so moved it in there
-
 // Configure toast library:
 toastr.options.escapeHtml = true; // Prevent raw HTML inserts
 toastr.options.timeOut = 4000; // How long the toast will display without user interaction
@@ -968,11 +966,11 @@ async function firstLoadInit() {
         const tokenData = await tokenResponse.json();
         token = tokenData.token;
     } catch {
-        hideLoader();
         toastr.error(t`Couldn't get CSRF token. Please refresh the page.`, t`Error`, { timeOut: 0, extendedTimeOut: 0, preventDuplicates: true });
         throw new Error('Initialization failed');
     }
 
+    showLoader();
     initLibraryShims();
     addShowdownPatch(showdown);
     reloadMarkdownProcessor();
@@ -990,7 +988,6 @@ async function firstLoadInit() {
     await initPresetManager();
     await getSystemMessages();
     await getSettings();
-    showLoader();
     initKeyboard();
     initDynamicStyles();
     initTags();

public/scripts/popup.js

@@ -1,6 +1,6 @@
 import dialogPolyfill from '../lib/dialog-polyfill.esm.js';
 import { shouldSendOnEnter } from './RossAscends-mods.js';
-import { power_user } from './power-user.js';
+import { power_user, toastPositionClasses } from './power-user.js';
 import { removeFromArray, runAfterAnimation, uuidv4 } from './utils.js';
 
 /** @readonly */
@@ -725,15 +725,6 @@ export function fixToastrForDialogs() {
     if (!toastContainer) {
         toastContainer = document.createElement('div');
         toastContainer.setAttribute('id', 'toast-container');
-        if (power_user.toastr_position) {
-            toastr.options.positionClass = (power_user.toastr_position);
-        } else {
-            console.warn('Did not find poweruser.toastr_position; defaulting to top center');
-            power_user.toastr_position = 'toast-top-center';
-            toastr.options.positionClass = (power_user.toastr_position);
-            $(`#toastr_position option[value=${power_user.toastr_position}]`).attr('selected', true);
-        }
-        //if (toastr.options.positionClass) toastContainer.classList.add(toastr.options.positionClass);
     }
 
     // Check if toastr is already a child. If not, we need to move it inside this dialog.
@@ -752,6 +743,7 @@ export function fixToastrForDialogs() {
             toastContainer.remove();
         } else {
             document.body.appendChild(toastContainer);
+            toastContainer.classList.remove(...toastPositionClasses);
             toastContainer.classList.add(toastr.options.positionClass);
         }
     }

public/scripts/power-user.js

@@ -52,7 +52,7 @@ import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '
 import { AUTOCOMPLETE_SELECT_KEY, AUTOCOMPLETE_WIDTH } from './autocomplete/AutoComplete.js';
 import { SlashCommandEnumValue, enumTypes } from './slash-commands/SlashCommandEnumValue.js';
 import { commonEnumProviders, enumIcons } from './slash-commands/SlashCommandCommonEnumsProvider.js';
-import { POPUP_TYPE, callGenericPopup } from './popup.js';
+import { POPUP_TYPE, callGenericPopup, fixToastrForDialogs } from './popup.js';
 import { loadSystemPrompts } from './sysprompt.js';
 import { fuzzySearchCategories } from './filters.js';
 import { accountStorage } from './util/AccountStorage.js';
@@ -70,6 +70,15 @@ export {
     applyPowerUserSettings,
 };
 
+export const toastPositionClasses = [
+    'toast-top-left',
+    'toast-top-center',
+    'toast-top-right',
+    'toast-bottom-left',
+    'toast-bottom-center',
+    'toast-bottom-right',
+];
+
 export const MAX_CONTEXT_DEFAULT = 8192;
 export const MAX_RESPONSE_DEFAULT = 2048;
 const MAX_CONTEXT_UNLOCKED = 512 * 1024;
@@ -81,6 +90,7 @@ const maxContextStep = 64;
 const defaultStoryString = '{{#if system}}{{system}}\n{{/if}}{{#if description}}{{description}}\n{{/if}}{{#if personality}}{{char}}\'s personality: {{personality}}\n{{/if}}{{#if scenario}}Scenario: {{scenario}}\n{{/if}}{{#if persona}}{{persona}}\n{{/if}}';
 const defaultExampleSeparator = '***';
 const defaultChatStart = '***';
+const defaultToastPosition = 'toast-top-center';
 
 const avatar_styles = {
     ROUND: 0,
@@ -137,7 +147,7 @@ let power_user = {
     fast_ui_mode: true,
     avatar_style: avatar_styles.ROUND,
     chat_display: chat_styles.DEFAULT,
-    toastr_position: 'toast-top-center',
+    toastr_position: defaultToastPosition,
     chat_width: 50,
     never_resize_avatars: false,
     show_card_avatar_urls: false,
@@ -1046,39 +1056,13 @@ function applyChatDisplay() {
 }
 
 function applyToastrPosition() {
-
+    if (!toastPositionClasses.includes(power_user.toastr_position)) {
-    if (!power_user.toastr_position) {
+        power_user.toastr_position = defaultToastPosition;
-        power_user.toastr_position = 'toast-top-center';
+        console.warn(`applyToastrPosition: invalid toastr position, defaulting to ${defaultToastPosition}`);
-        console.warn('applyToastrPosition: missing toastr position, defaulting to top-center');
-    }
-
-    switch (power_user.toastr_position) {
-        case 'toast-top-left': {
-            toastr.options.positionClass = 'toast-top-left';
-            break;
-        }
-        case 'toast-top-center': {
-            toastr.options.positionClass = 'toast-top-center';
-            break;
-        }
-        case 'toast-top-right': {
-            toastr.options.positionClass = 'toast-top-right';
-            break;
-        }
-        case 'toast-bottom-left': {
-            toastr.options.positionClass = 'toast-bottom-left';
-            break;
-        }
-        case 'toast-bottom-center': {
-            toastr.options.positionClass = 'toast-bottom-center';
-            break;
-        }
-        case 'toast-bottom-right': {
-            toastr.options.positionClass = 'toast-bottom-right';
-            break;
-        }
     }
 
+    toastr.options.positionClass = power_user.toastr_position;
+    fixToastrForDialogs();
     $('#toastr_position').val(power_user.toastr_position).prop('selected', true);
 }
 
@@ -1739,6 +1723,7 @@ async function loadPowerUserSettings(settings, data) {
     loadMovingUIState();
     loadCharListState();
     toggleMDHotkeyIconDisplay();
+    applyToastrPosition();
 }
 
 function toggleMDHotkeyIconDisplay() {