feat: showLoading(buttonToReplace) (#2107)

src/instanceMethods/hideLoading.js

@@ -3,7 +3,7 @@ import { swalClasses } from '../utils/classes.js'
 import privateProps from '../privateProps.js'
 
 /**
- * Enables buttons and hide loader.
+ * Hides loader and shows back the button which was hidden by .showLoading()
  */
 function hideLoading () {
   // do nothing if popup is closed
@@ -13,9 +13,10 @@ function hideLoading () {
   }
   const domCache = privateProps.domCache.get(this)
   dom.hide(domCache.loader)
-  if (innerParams.showConfirmButton) {
-    dom.show(domCache.confirmButton, 'inline-block')
-  } else if (!innerParams.showConfirmButton && !innerParams.showCancelButton) {
+  const buttonToReplace = domCache.popup.getElementsByClassName(domCache.loader.getAttribute('data-button-to-replace'))
+  if (buttonToReplace.length) {
+    dom.show(buttonToReplace[0], 'inline-block')
+  } else if (dom.allButtonsAreHidden()) {
     dom.hide(domCache.actions)
   }
   dom.removeClass([domCache.popup, domCache.actions], swalClasses.loading)

src/staticMethods/showLoading.js

@@ -3,20 +3,28 @@ import Swal from '../sweetalert2.js'
 import { swalClasses } from '../utils/classes.js'
 
 /**
- * Show spinner instead of Confirm button
+ * Shows loader (spinner), this is useful with AJAX requests.
+ * By default the loader be shown instead of the "Confirm" button.
  */
-const showLoading = () => {
+const showLoading = (buttonToReplace) => {
   let popup = dom.getPopup()
   if (!popup) {
     Swal.fire()
   }
   popup = dom.getPopup()
   const actions = dom.getActions()
-  const confirmButton = dom.getConfirmButton()
   const loader = dom.getLoader()
 
+  if (!buttonToReplace && dom.isVisible(dom.getConfirmButton())) {
+    buttonToReplace = dom.getConfirmButton()
+  }
+
   dom.show(actions)
-  dom.hide(confirmButton)
+  if (buttonToReplace) {
+    dom.hide(buttonToReplace)
+    loader.setAttribute('data-button-to-replace', buttonToReplace.className)
+  }
+  loader.parentNode.insertBefore(loader, buttonToReplace)
   dom.addClass([popup, actions], swalClasses.loading)
 
   dom.show(loader)

src/utils/dom/domUtils.js

@@ -1,4 +1,4 @@
-import { getTimerProgressBar } from './getters.js'
+import { getTimerProgressBar, getConfirmButton, getDenyButton, getCancelButton } from './getters.js'
 import { swalClasses, iconTypes } from '../classes.js'
 import { toArray, objectValues, warn } from '../utils.js'
 
@@ -155,7 +155,8 @@ export const toggle = (elem, condition, display) => {
 // borrowed from jquery $(elem).is(':visible') implementation
 export const isVisible = (elem) => !!(elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length))
 
-/* istanbul ignore next */
+export const allButtonsAreHidden = () => !isVisible(getConfirmButton()) && !isVisible(getDenyButton()) && !isVisible(getCancelButton())
+
 export const isScrollable = (elem) => !!(elem.scrollHeight > elem.clientHeight)
 
 // borrowed from https://stackoverflow.com/a/46352119

sweetalert2.d.ts

@@ -137,17 +137,17 @@ declare module 'sweetalert2' {
     /**
      * Gets the "Confirm" button.
      */
-    function getConfirmButton(): HTMLElement | null;
+    function getConfirmButton(): HTMLButtonElement | null;
 
     /**
      * Gets the "Deny" button.
      */
-    function getDenyButton(): HTMLElement | null;
+    function getDenyButton(): HTMLButtonElement | null;
 
     /**
      * Gets the "Cancel" button.
      */
-    function getCancelButton(): HTMLElement | null;
+    function getCancelButton(): HTMLButtonElement | null;
 
     /**
      * Gets actions (buttons) wrapper.
@@ -180,12 +180,18 @@ declare module 'sweetalert2' {
     function disableButtons(): void;
 
     /**
-     * Disables buttons and show loader. This is useful with AJAX requests.
+     * Shows loader (spinner), this is useful with AJAX requests.
+     *
+     * By default the loader be shown instead of the "Confirm" button, but if you want
+     * another button to be replaced with a loader, just pass it like this:
+     * ```
+     * Swal.showLoading(Swal.getDenyButton())
+     * ```
      */
-    function showLoading(): void;
+    function showLoading(buttonToReplace?: HTMLButtonElement): void;
 
     /**
-     * Enables buttons and hide loader.
+     * Hides loader and shows back the button which was hidden by .showLoading()
      */
     function hideLoading(): void;
 

test/ts/simple-usage.ts

@@ -1,3 +1,5 @@
 import Swal from 'sweetalert2'
 
 Swal.fire()
+
+Swal.showLoading(Swal.getConfirmButton())