fix(loading): allow html content (#18242)

fixes #18135

core/src/components/loading/loading.tsx

@@ -2,6 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
 
 import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
+import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -196,7 +197,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
           </div>
         )}
 
-        {this.message && <div class="loading-content">{this.message}</div>}
+        {this.message && <div class="loading-content" innerHTML={sanitizeDOMString(this.message)}></div>}
       </div>
     ];
   }

core/src/components/loading/test/basic/e2e.ts

@@ -26,6 +26,10 @@ test('loading: backdrop standalone', async () => {
   await testLoading(DIRECTORY, '#backdrop-loading');
 });
 
+test('loading: html content basic', async () => {
+  await testLoading(DIRECTORY, '#html-content-loading');
+});
+
 /**
  * RTL Tests
  */
@@ -53,3 +57,7 @@ test('loading:rtl: custom class basic', async () => {
 test('loading:rtl: backdrop standalone', async () => {
   await testLoading(DIRECTORY, '#backdrop-loading', true);
 });
+
+test('loading:rtl: html content basic', async () => {
+  await testLoading(DIRECTORY, '#html-content-loading', true);
+});

core/src/components/loading/test/basic/index.html

@@ -28,6 +28,7 @@
       <ion-button id="translucent-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
       <ion-button id="custom-class-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
       <ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
+      <ion-button id="html-content-loading" expand="block" onclick="presentLoadingWithOptions({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>
 
       <ion-loading-controller></ion-loading-controller>
 
@@ -82,6 +83,10 @@
   </script>
 
   <style>
+    .html-loading {
+      --max-width: auto;
+    }
+    
     .custom-loading {
       --background: rgba(37, 210, 223, 0.8);
       --spinner-color: white;