Merge pull request #2686 from SillyTavern/fix-extensions-toggle Wait for settings before reloading after toggling extensions

3167c85791b2ebf8708e45ebff6aa9b6fe4a8dfc

Wolfsblvt <wolfsblvt@gmail.com>

Signed

public/scripts/extensions.js+17 -1 Viewed

 let saveMetadataTimeout = null;
 let requiresReload = false;
+let stateChanged = false;
 export function saveMetadataDebounced() {
     const context = getContext();

 async function enableExtension(name, reload = true) {
     extension_settings.disabledExtensions = extension_settings.disabledExtensions.filter(x => x !== name);
+    stateChanged = true;
     await saveSettings();
     if (reload) {
         location.reload();

 async function disableExtension(name, reload = true) {
     extension_settings.disabledExtensions.push(name);
+    stateChanged = true;
     await saveSettings();
     if (reload) {
         location.reload();

             await oldPopup.complete(POPUP_RESULT.CANCELLED);
+        }
-        const popup = new Popup(html, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, customButtons: [updateAllButton], allowVerticalScrolling: true });
+        const popup = new Popup(html, POPUP_TYPE.TEXT, '', {
+            okButton: 'Close',
+            wide: true,
+            large: true,
+            customButtons: [updateAllButton],
+            allowVerticalScrolling: true,
+            onClosing: async () => {
+                if (stateChanged) {
+                    toastr.info('The page will be reloaded shortly...', 'Extensions state changed');
+                    await saveSettings();
+                }
+                return true;
+            },
+        });
         popupPromise = popup.show();
     } catch (error) {
         toastr.error('Error loading extensions. See browser console for details.');

public/scripts/popup.js+7 -7 Viewed

  * @property {POPUP_RESULT|number?} [defaultResult=POPUP_RESULT.AFFIRMATIVE] - The default result of this popup when Enter is pressed. Can be changed from `POPUP_RESULT.AFFIRMATIVE`.
  * @property {CustomPopupButton[]|string[]?} [customButtons=null] - Custom buttons to add to the popup. If only strings are provided, the buttons will be added with default options, and their result will be in order from `2` onward.
  * @property {CustomPopupInput[]?} [customInputs=null] - Custom inputs to add to the popup. The display below the content and the input box, one by one.
- * @property {(popup: Popup) => boolean?} [onClosing=null] - Handler called before the popup closes, return `false` to cancel the close
+ * @property {(popup: Popup) => Promise<boolean?>|boolean?} [onClosing=null] - Handler called before the popup closes, return `false` to cancel the close
- * @property {(popup: Popup) => void?} [onClose=null] - Handler called after the popup closes, but before the DOM is cleaned up
+ * @property {(popup: Popup) => Promise<void?>|void?} [onClose=null] - Handler called after the popup closes, but before the DOM is cleaned up
  * @property {number?} [cropAspect=null] - Aspect ratio for the crop popup
  * @property {string?} [cropImage=null] - Image URL to display in the crop popup
  */

     /** @readonly @type {CustomPopupButton[]|string[]?} */ customButtons;
     /** @readonly @type {CustomPopupInput[]} */ customInputs;
-    /** @type {(popup: Popup) => boolean?} */ onClosing;
+    /** @type {(popup: Popup) => Promise<boolean?>|boolean?} */ onClosing;
-    /** @type {(popup: Popup) => void?} */ onClose;
+    /** @type {(popup: Popup) => Promise<void?>|void?} */ onClose;
     /** @type {POPUP_RESULT|number} */ result;
     /** @type {any} */ value;

         this.result = result;
         if (this.onClosing) {
-            const shouldClose = this.onClosing(this);
+            const shouldClose = await this.onClosing(this);
             if (!shouldClose) {
                 this.#isClosingPrevented = true;
                 // Set values back if we cancel out of closing the popup

         fixToastrForDialogs();
         // After the dialog is actually completely closed, remove it from the DOM
-        runAfterAnimation(this.dlg, () => {
+        runAfterAnimation(this.dlg, async () => {
             // Call the close on the dialog
             this.dlg.close();
             // Run a possible custom handler right before DOM removal
             if (this.onClose) {
-                this.onClose(this);
+                await this.onClose(this);
+            }
             // Remove it from the dom